mtn/cocoa-eh-hugo-theme

Font flickering issue

Opened this issue · 4 comments

mtn commented

With fancy fonts (default) enabled, there is a noticeable flicker. Currently, the only way to get rid of this is to not use the sourced fonts.

Things to look into:

If anyone knows anything about how to fix this, please let me know!

@mtn according to this disabling the async behavior, but this theme is all about that...
According to the second article that you posted, this suppose to help and kinda it does

.wf-loading { visibility: hidden; } .wf-active, .wf-inactive { visibility: visible; }

lorio commented

@mtn <noscript> can block web fonts from loading.. removing it helped in my case.

I solved it on a site I am working on in three steps:

  1. In head_includes.html remove the <noscript> tag.
  2. In footer_scripts.html remove the font loading block (i.e., rely only on the stylesheets in the header to load the fonts).
  3. In the fonts section at the bottom of main.css remove the .wf-raleway-*, .wf-merriweather-*, and .wf-ubuntu-mono-* parts of the element identifiers.

Happy to put this together as a pull request if you want to use this method.

mtn commented

Sure, that'd be super helpful! As @vandot mentioned above, async was originally a main selling point of the theme. But it'd be better to move on from that than leave it broken indefinitely. I'll check the async loader stuff again to make sure nothing is implemented wrong, but I'm fine making the tradeoff.