Using WebFont Loader

January 22, 2011

In the process of designing this site, I decided to use some custom fonts using the @font-face CSS attribute. In comparison to some of the other web font options (Cufon, sIFR, FLIR), the @font-face CSS method is simple, easy to implement and well supported in most modern browsers. Although the Google Font API is probably the most well-known web font library, I decided to roll my own kit from Font Squirrel and self-host the fonts. The really nice part about Font Squirrel is that they provide all of the different font formats (TTF, EOT, OTF, and SVG), compatible with every browser on the market.

For all of my H1-H6 headings, I use the following markup:

@font-face {
    font-family: 'YanoneKaffeesatzRegular';
    src: url('YanoneKaffeesatz-Regular-webfont.eot');
    src: local('☺'), url('/fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'), url('/fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'), url('/fonts/YanoneKaffeesatz-Regular-webfont.svg#webfont1BSMunJa') format('svg');
    font-weight: normal;
    font-style: normal;
}

I then load the font in like I would any other family:

h1, h2, h3, h4, h5, h6 {
    font-family: YanoneKaffeesatzRegular, Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #111111;
}

Everything looked great besides one small, yet extremely annoying, caveat.

I noticed in Firefox and Opera that for a split second, just before the page finished rendering, unstyled text would be displayed. This drove me crazy. Some subsequent Googling let me know that this was common, often referred to as FOUT (Flash of Unstyled Text). The fix was pretty trivial. What you can do is use the WebFont Loader from Google & Typekit.

The WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Font API provides. The key is using the events system to hide the font until it's ready to be shown. There are quite a few implementation options so I'd suggest checking out some of the following articles for help:

Note: If you see a horizontal scroll-bar after implementing the WebFont Loader on body text, try adding overflow attributes:

body {
    font-size: 75%;
    font-family: DroidSansRegular;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: scroll;
}