Web Font flickering on load

html css webfonts
niico picture niico · Nov 12, 2013 · Viewed 10.9k times · Source

We have a website - everything is working but web fonts flicker for a split second before the page loads.

This doesn't seem to happen on other sites & I can't see any difference.

We are using fonts.com fonts.

All I can find on Google is an issue with Firefox - but this happens in all browsers for me.

eg http://lpff.niico.co.uk/About/Who-We-Are/Our-People

Is there something obvious I have missed? How can I fix this?

Answer

Dan Goodspeed picture Dan Goodspeed · Nov 12, 2013

You're probably seeing what is called FOUC (flash of unstyled content). It's a common issue. I suppose you can try the web font loader for more control of the font loading.

Related questions

How do I install a custom font on an HTML site

I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug" I have it downloaded locally - is there a simple CSS trick to accomplish …

Read More
Use multiple @font-face rules in CSS

How can I use more than @font-face rule in my CSS? I've inserted this into my stylesheet: body { background: #fff url(../images/body-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica, sans-serif; } @font-face { font-family: 'GestaReFogular'; src: url('gestareg-webfont.eot'); src: …

Read More
Font weight ignored in Chrome

I created a fiddle trying to use Open Sans font with font-weight 300: HTML <span class="demo">example</span> CSS .demo { font-weight: 400 !important; font-family: 'Open Sans' !important; font-style: normal; font-variant: normal; } I use Google fonts to define …

Read More