Speed up @fontface loading time

@fontface is a great tool for giving your site an individual look, the down-side is that on a standard site, the font is downloaded on each page view.

As the font can take a little time to download, the page text is loaded first and then the font is replaced once it has finished downloading which (especially on slow connections) leads to a flash of unformatted text (sometimes described as FOUT flash of unformatted text).

There are a few tutorials which explain how to stop the text displaying until the font has finished downloading, but I feel this is against the readers interests as ultimatley they are there to read the text, however it looks.

My partial workaround for this is to instruct the users browser to cache the font so it doesn't have to redownload for each page view. You can also add a local source in your css that will look to see if the font is already installed on the users computer.

So, assuming you have used the font squirrel generator to create your fonts, or that you have fonts suitable for all browsers, we need to cache the following file types:

.eot (IE6-8)
.woff (IE9)
.ttf (firefox,chrome,opera,safari)
.svg (safari,chrome,opera)

We can do this using the .htaccess in your root directory by adding the following lines:

 

<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None
<FilesMatch "\.(eot|woff|ttf|svg|)$">
Header unset Cache-control
Header set Expires "Wed, 28 Apr 2016 20:00:00 GMT"
</FilesMatch>

 

Add a date quite far in the future and the font will be stored on the users computer with no need to reload.

There is also another method which I haven't had time to test which uses (the benefit being that you would never have to change the date):

<FilesMatch "\.(eot|woff|ttf|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>

You can add any other file types to this string to further speed up loading times in general. I normally use the following to involve the favicon, css and js files and also flash content:

(ico|gz|js|css|swf|eot|woff|ttf|svg|)