cocoa-eh-hugo-theme icon indicating copy to clipboard operation
cocoa-eh-hugo-theme copied to clipboard

Font flickering issue

Open mtn opened this issue 7 years ago • 4 comments

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:

  • https://github.com/typekit/webfontloader
  • http://help.typekit.com/customer/portal/articles/6852

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

mtn avatar Dec 26 '17 00:12 mtn

@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; }

vandot avatar Mar 18 '18 22:03 vandot

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

lorio avatar Nov 19 '18 19:11 lorio

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.

elidourado avatar Aug 10 '19 20:08 elidourado

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.

mtn avatar Aug 14 '19 02:08 mtn