Self-hosted Webfonts: An Example

For aesthetic reasons, because I consider support widespread enough and also as an exercise I have integrated several webfonts with the new appearance of this website. I think it looks OK, and it works OK in modern browsers.

The font I use for the plain parts of the post body texts is „Futura Light BT“.

First, I downloaded it from fontsforweb.com.

I put the font files which came in „EOT“, „WOFF“ as well as „TTF“ format into a directory „./fonts“ in the directory of my wordpress theme. See CSS further below and note how relative references in „url()“ directives work as expected.

I had to make the font file content-types known to my apache webserver, so that the delivery to the browsers runs correctly (the following was added to the website’s „.htaccess“ file):

AddType application/vnd.ms-fontobject .eot
AddType font/otf .otf
AddType font/ttf .ttf
AddType application/x-font-woff .woff

Now that remote browsers could use the hosted fonts, I had to add the font-face definition to my site’s CSS:

@font-face {
   font-family: 'FuturaLightBT';
   src: local('FuturaLightBT'),
        url('./fonts/FuturaLightBT.eot?') format('eot'), 
        url('./fonts/FuturaLightBT.woff') format('woff'),
        url('./fonts/FuturaLightBT.ttf') format('truetype'); }

This notation means:

„Define a possible setting for ‚font-family‘, ‚FuturaLightBT‘ as follows:

First, check if the font-family ‚FuturaLightBT‘ is available locally (already installed). If yes, use that font.

Otherwise, try these files in the formats ‚EOT‘, ‚WOFF‘ and ‚TTF‘ to render the font.“

Please note: The question mark after the „.eot“ suffix is supposedly a hack to make it more reliable in the IE browser version 8. I can not confirm or rule out that it makes any difference. I think it has something to do with offline reading (when the page, stylesheet and font files are stored locally). Read further explanations at [1].

From then on I could use „FuturaLightBT“ as a CSS „font-family“ setting, for example like this:

.post { color: #FFF; font-family: 'FuturaLightBT', sans-serif; }

Facit:

I like Futura and I enjoy being able to lay out my website’s text in it.

Futura Light BT in action.