Download/embed fonts with @font-face | The Electric Toolbox Blog

Table of Contents

I wouldn’t normally bother with anything other than the default web fonts but the design for the new Personalised Plates website (still in development) calls for a stylized font which is similar to that used on the plates themselves for headings, lead-in paragraph text and so on. As a result I’ve been messing around with @font-face this week and present how to do this here, along with a bunch of useful references online.

Font and browser support

There are a number of different font formats which different browsers support so you need to provide the font in multiple formats (see the Font Squirrel section below for how to convert). But then you didn’t really expect it to be easy now, did you?

Internet Explorer has supported font embedding with @font-face since IE4. The fonts must be in EOT format = Embedded OpenType.

Firefox supports @font-face since since 3.5, with 3.5 supporting TrueType and OpenType fonts, and 3.6 adding support for WOFF (Web Open Font Format). WOFF is a "strong favorite" for standardization by the W3C and a major plus is that it is already compressed making it by default a smaller download than other font formats (but also refer to the mod_deflate section below).

Chrome supports TrueType and OpenType from 4.0. SVG fonts have been supported in Webkit from 325 so presumably Chrome has always supported @font-face; it doesn’t really matter with Chrome anyway because it always updates itself to the current stable major version.

Safari supports TrueType, OpenType and SVG fonts from version 3.1 (525). As mentioned above, SVG fonts have been in Webkit since 325 but I don’t know which version of Safari this relates to.

Opera supports TrueType, OpenType fonts from version 10.0 and SVG from 9.0.

iPad/iPhone/iPod support SVG only, apparantly from iOS 3.1. I have the iPhone Simulator running on my Mac (I’ll write a post about this next week) and can confirm these work.

How to embed fonts with @font-face

Since the fonts have to be converted anyway, I recommend using Font Squirrel (see below) which generates all the necessary CSS information. But to make this post complete I’ll include the CSS information here.

The font being embedded with this example is called KlavikaRegular and the CSS to embed it is like so:

@font-face {
    font-family: 'KlavikaRegular';
    src: url('/path/to/klavika-regular-webfont.eot');
    src: local('KlavikaRegular'),
        url('/path/to/klavika-regular-webfont.woff') format('woff'),
        url('/path/to/klavika-regular-webfont.ttf') format('truetype'),
        url('/path/to/klavika-regular-webfont.svg#webfontiYJyHRas') format('svg');
}

You can then set up a style like e.g.:

h1 {
    font-family: KlavikaRegular;
}

In the @font-face declaration, the font-family refers to the name the font should be referred to in the rest of the style sheet. The src: attributes specify where the fonts should be found.

In order for Internet Explorer to use the fonts correctly, it needs its own src declaration and the secondary src declaration needs a "local" setting so that IE will ignore it. The other browsers will then use the other declarations, using which ever font format is applicable in order of preference; the first matching one is the one that will be used.

With SVG fonts, they also need a #hashtag; again Font Squirrel will generate this all for you. The examples used above were all generated with Font Squirrel.

Licensing Issues

Before embedding any fonts, make sure you are legally allowed to embed them in a web page. Font Squirrel has some you are free to use and there are also many online resources with freely available fonts that you can use in personal and/or commercial projects.

For example, the Klavika font used on the Personalised Plates website must have a per-domain license to be used as a webfont and it is not permitted to convert them to other formats, which means using a service like Font Squirrel (see below) is not permitted.

Converting fonts: Font Squirrel

OK so you only have the font as an OTF or a TTF and need to convert it to all the other formats required. I tried a couple of different online font converters (and read bad things about Microsoft’s EOT converter) and found Font Squirrel to be easy to use and, as an added bonus, created all the CSS I needed to embed the font in my web page.

Go to Font Squirrel’s @font-face Generator and follow the instructions. This will provide you with a zip file containing everything you need.

Compression with mod_deflate

WOFF is already compressed so ideally make that the font with the highest precedence even though only one browser version currently supports it; others will follow if it is to be the standard. The nice thing with WOFF is it doesn’t need to be compressed on the server side which puts less load on the server.

For the others, add some rules like so to your main Apache configuration or .htaccess file to compress them on the fly. SVG compresses down the best so that should have the highest precedence overall. I did experience some issues with SVG fonts on Opera myself, but it may be due to the font itself rather than Opera.

AddType application/x-font-ttf ttf
AddType application/vnd.ms-fontobject eot
Addtype application/x-font-otf otf
AddOutputFilterByType DEFLATE application/x-font-ttf application/vnd.ms-fontobject image/svg+xml application/x-font-otf

If you are using a different browser then I can’t help you as I only use Apache myself.

Google’s font directory

Google has a font directory and makes it very easy to embed fonts but you are limited to the small range of fonts they supply; if you want to use something else you are out of luck.