Streaming live at 10am (PST)

Google font jerky / flickering / flashing on load


#1

Hey guys, I’ve added google font to the logo and I just noticed it loads really oddly in latest Google Chrome on Mac OS and this is quite ugly. Any solution to this?

Chrome Version 66.0.3359.117 (Official Build) (64-bit)

Safari seems to be OK after first load

See video here https://www.useloom.com/share/bdb4340fa486482c904c99bb84172d8c


Here is my site Read-Only: LINK


#2

Hi @radmitry

Thanks so much for posting. This issue is called FOUT (Flash of Unstyled Text) and you can read more on this here: https://webdesign.tutsplus.com/articles/quick-tip-avoid-fout-by-adding-a-web-font-preloader--webdesign-8287

You can fix this by adding a bit of custom code to your site — Dave explains this more here: Flash of unstyled text - fallback fonts loads initially then switches to google font.

Alternatively, you can try downloading the Google font, then uploading it to your site as a custom font.

I hope this helps! :bowing_man:


#3

Thanks a lot for quick reply @Brando
Solution from Dave worked seamlessly (as usual with @cyberdave)

My forum search never bring the results I am searching for, I always keep phrasing it slightly differently. :man_shrugging:

:webflow_heart::webflow_heart::webflow_heart:


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.