Font Embedding - Better (12 Years) Late Than Never

Twelve years ago, when the internet was all shiny and new and I hadn't even heard of GNU/Linux, one of my favourite websites was the Microsoft typography website. One of the things I remember reading about on the site was a tool called WEFT (Web Embedding Fonts Tool). WEFT allowed you to embed fonts on your websites. This meant they were not restricted to using the fonts someone had installed on their computer, but could use any font you wanted. As someone who suffers from projectile vomiting at the merest glance of Comic Sans I immediately put trying out WEFT on my to-do list. And then forgot all about it.

Over a decade later I was reading the press release for Mozilla Firefox 3.6 and noticed that font embedding was about to re-enter the limelight. Mozilla Firefox 3.6 includes a support for a very similar system to WEFT for embedding fonts on web pages. It's called WOFF. So, being as curious and nosey as ever I thought I would investigate using WOFF.

But where to start? It turned out that from deciding to create a web-page using WOFF to the finished article took me the best part of a day of messing around, browsing, compiling tarballs and experimenting.

I decided I'd create a very simple web-page using one of my own fonts, Anchor. This is because there are a number of irritating legal issues around font embedding for web pages. In order to be able to embed a font on a website you have to have a licence to do this. The issues are explained very well in this article by Armand Niculescu.

Once I'd decided on a font, the next job was to create a WOFF file from Anchor. There are many reasons that you would want to use a WOFF file for font embedding rather than have your web-page link to your original font file. For instance a WOFF file is compressed, which saves download time. In addition, a WOFF file can contain only a subset of the characters or glyphs in a font that you actually use on your site which again can save a lot of download time on a site that uses several fonts.

Sadly, the simplest way to do this on GNU/Linux was download a windows binary file (an .exe file) and run it via WINE. WINE is a compatibility layer that allows you to run binary files intended for use on Microsoft Windows on GNU/Linux.

The tool I needed to run to convert font files to WOFF files is called sfnt2woff and I found some very good instructions on how to run and use this tool on Federico Moretti's blog. After creating my WOFF file, I could then incorporate it into a web page using the CSS @font-face declaration. All seemed to work well in Firefox 3.6 when I tested the resulting .html file from my local drive.

Success - my .woff works locally

However, when I was looking at Armand's Niculescu's blog entry again I realised that was not enough to ensure compatibility with most browsers. However, if I included a few more formats alongside my WOFF file, I could get the embedded fonts on my page working for 92% of browsers - which sounded good to me.

In order to make my web page work on the majority of web browsers I would also need to add a @font-face declaration that linked to a copy of my original TrueType font (.ttf) file for older versions of Firefox and the Opera, Safari and Chrome browsers.

In addition, to be on the safe side, I really needed to include an SVG font version of the font for use with the Safari and Chrome browsers. Creating an SVG version was simplicity itself. As I created the most recent version of the Anchor font in the free software tool FontForge, all I needed to do was use FontForge to export an .svg version of the Anchor font.

FontForge 2.0 File Export Dialogue box

SVG font created sucessfully there was one more format I needed to create - a Microsoft EOT file. An EOT file does exactly the same job as a WOFF file on Microsoft browsers. As WOFF is only going to be supported in Microsoft Internet Explorer 9 and later, for a site to work on Microsoft Internet Explorer 4-8 I'd need to create a EOT file.

My initial thought for creating a EOT file was to download WEFT from the Microsoft website and use that via WINE. However this failed miserably. But, as a consolation, I found that even Windows users found Microsoft's WEFT tool elderly, unintuitive and almost impossible to use.

Fortunately I found another tool on the internet - it was called ttf2eot and it claimed to do exactly what its name suggests. The bad news (simply because I'm lazy) was that the tool was a piece of C++ source code. That meant I had to download the build-essentials package and compile a binary myself. It took all of two minutes - such hardship!

Anyway, the file compiled beautifully and the tool worked first time. One line in the terminal (the tool needs the angle brackets around the source font filename):

./ttf2eot <Anchor.ttf> Anchor.eot

Was enough to create an eot file. The only thing that I found rather odd was my finished EOT file was bigger than the original TrueType font file!

So, I added all the formats into my @font-face declaration, tested the file locally and it worked. So triumphantly I uploaded my finished html file, along with my ttf, svg, woff and eot to my webspace using gFTP. And it failed miserably. 

Uploaded to my webspace - massive fail

Here was my CSS:

@font-face {
  font-family: 'Anchor';
  src: url('Anchor.eot');
  src: url("Anchor.woff") format("woff"),
  src: url("Anchor.ttf") format("truetype"),
  src: url("Anchor.svg#anchor") format("svg");
}

I couldn't understand why it failed - I thought I'd done everything correctly. But fortunately I had come across an excellent article by Paul Irish that explained exactly where I was going wrong. There are a whole host of gotchas with font embedding, and the order of statements in the CSS declaration is critical:

@font-face {
  font-family: 'Anchor';
  src: url('Anchor.eot');
  src: local('☺'),
    url("Anchor.woff") format("woff"),
    url("Anchor.ttf") format("truetype"),
    url("Anchor.svg#anchor") format("svg");
}

Was the only order that would get the @font-face statement to behave.

Success at last!

And then... And then... ...I found out that I needn't of bothered. A website called Font Squirrel has a nice tool that does everything for you plus more. In particular, it creates subsets of fonts for you so you can cut down on your file sizes and download times. You just need to specify the glyphs (characters) in your .ttf, .eot, .woff and .svg files that you actually use.

Font Squirrel also have loads of fonts that you can legally embed, and are hand-picked to ensure they are all good quality type faces.

Another good source of information is Milton Bayer's site, which explains about the CSS and XHTML needed to get WOFF working for those that may be unfamiliar with it.

Anyway, it was fun and I learnt a lot. The end result can be seen for real in the comfort of your own browser here:

http://www.kecskebak.co.uk/woff.html

I've designed a handful of fonts that can all be freely embedded in your websites. You can get hold of them from here.