Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




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:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    //define css font family
    families: ['Myriad'],
    //and path to css file where @font-face is defined
    urls : ['/cms.design/css/fonts/fonts.css']
  }
});
</script>
</head>
<body>
<div id='custom_font'>
Some text in custom font
</div>
</body>
</html>

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 BlogAlike.com

blog comments powered by Disqus