Lightning Fast Font Loading Techniques (2015)
Faster Font Loading
Font Loading TechniquesThis post is a work in progress and will be updated over time.  Some techniques are browser-specific and experimental.  Thank you for looking!

It seems as though most websites use non-default fonts these days and who can blame them?  System fonts are all pretty boring and custom fonts add a bit of flare and freshness to a site's design.  The problem with using custom fonts, however, is they can really slow down your site load.  Font files are large, can require separate font files for bold and italic, and can block rendering if the developer doesn't work around them.  Let me show you a strategy for faster font loading!

1. Put Fonts on CDN

One simple solution for improving site speed is using a CDN, and that's no different for fonts.  It's important to ensure the CDN has proper CORS settings, as I discussed in Service Fonts from CDN:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
	add_header Access-Control-Allow-Origin *;
}


You'll see AJAX / cross-domain errors in the console if the CDN's CORS settings are not properly configured.

2.  Use Non-Blocking CSS Loading

My Mozilla colleague Stephanie Hobson shared Loading CSS without blocking render with me, which outlines a strategy for preventing CSS loading from blocking render.  It's actually genius:

<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';">
<link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media='all';">


Essentially using media=none let's the browser download the stylesheet without blocking rendering, so when the stylesheet has loaded, setting the media to its desired setting will then render the screen as it should.  Nice!

Note:  I've had a few issues with this technique within Firefox but I've not yet figured out the exact reasoning for it, as sometimes no issue occurs.  Read Keith Clark's post for precise details and support.

3.  Separate Font Selectors

If a font hasn't loaded by the time it's used, the user will see (nothing, kind of) empty space until the font has loaded.  This is, of course, not good if the fonts fail to load.  At the very least, the user will be burdened with staring at empty space for a few seconds.  What's best is keeping custom font declarations protected with a class that is added to the body after the fonts have loaded:

h1 { font-family: Arial, serif; } /* basic system font */
.fontsloaded h1 { font-family:  'MySpecialFont', serif; } /* custom system font */


<link href="fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >


By using the font declaration strategy above, a system font is loaded initially and only after the custom font is loaded will it be enabled, thus the screen wont show empty content for any period of time.  I recommend creating a Stylus/Sass/Less mixin to set the font-family settings so that the custom selector is automatically set.



4.  Storing Fonts in localStorage
Did you know you can store fonts in localStorage?!  Crazy, right?!  Check out this post which details the process and even provides the code to do it!

Speed kills on the web and the strategies provided above will supercharge your custom font loading and CSS speed.  The solutions are all easy to implement, you just need to take the time!



    
    
    
        
    
    
    
        
    
    






Recent FeaturesCreating Scrolling Parallax Effects with CSSIntroduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...Incredible DemosImage Data URIs with PHPIf you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes.  Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute.  Doing so saves...background-size Matters

It's something that makes all men live in fear, and are often uncertain of.  It's never spoken, but the curiosity is always there.  Nine out of ten women agree in the affirmative.  Advertisers do their best to make us feel inadequate but...