• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

Prevent custom font flickering

Main problem with custom fonts, that it usually flickers when loading content. Text appears in default font, and then when custom font is downloaded, text changes to custom font. So user sees default font and only then custom font.

How you can deal with this situation? It is possbile to hide text until font preloads. Google provides library that allows you to manipulate loading events fot custom fonts.

It's use is simple, put this javascript code your website head:

<script src="//"></script>
  custom: {
    //define css font family
    families: ['Myriad'],
    //and path to css file where @font-face is defined
    urls : ['/']
<div id='custom_font'>
Some text in custom font

And then define CSS classes, where this font will appear:

.wf-loading #custom_font { 
  visibility: hidden; 
.wf-active #custom_font 
  visibility: visible; 
  font-family: 'Myriad';

You may also be interested in:

Powered by

blog comments powered by Disqus