Web fonts: traps for beginners

As part of the recent update to this blog's theme, a new set of webfonts was put in place. It took a bit of time to figure out a way for the webfonts to render properly in all browsers, so this note provides a set of pointers to resolve some traps for beginners.

Firstly, you will need to declare the web font using @font-face in your CSS file. There are lot's of references on how to do this so that it is picked up by most browsers, so I won't cover this point here.

Content types

One of the first traps for beginners is setting the correct content type. Some browsers may not accept webfonts if they are not served with the correct content type. Older servers may not recognise the file name extensions of webfonts, and so the content types may need to be set manually.

The following is a sample mapping of webfont extensions and their content types. In Apache, this can be put in your .htaccess file:

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

Cross-origin resource sharing

The other thing to watch out for is cross-origin resource sharing (CORS). If you are hosting your webfont files on a different host from your website, some browsers will refuse to load the font unless the correct CORS headers are sent with the webfont.

The following shows the header that needs to be sent with the webfont so that they can be loaded through sites on a different host. You can replace the asterisk with a scheme-host (i.e. a URL without the path component) if you want to restrict loading to a particular host.

<filesmatch ".(eot|otf|svg|ttf|woff)">
    Header set Access-Control-Allow-Origin "*"
Previous Post
Responsive theme update
Next Post
Book reviews: On introversion


The world says, No comment. So do I.