Embed web page fonts using @font-face

In searching for a solution to embed a particular font in one of my games^[1] at YBCA, I spent dozens of hours experimenting with the @font-face cross-browser^[2] CSS technology. It’s a technique that allows your browser (like MSIE or Firefox, right?) to read a TrueType (.TTF) or OpenType (.OTF) font file from a server and then use it to render type on a web page. The headlines on my blog are rendered using this technology^[3]. I’m really happy with the results.

The idea is to give the designer of the web page the ability to select exactly the font he or she wants to see on the finished page!

But, even with this great tech in place, Microsoft is playing its game of insisting on its own solution—they propose it as a “web standard” but in real life it’s implemented by nobody except Microsoft (using their .EOT file format). So there are two competing and incompatible ways of adding fonts to a web page—the open-source method, and the Microsoft method.

Initially I was able to devise a solution that works except for FireFox (it failed both on Mac OSX and on Windows and Firefox represents about 40% of my users so I really need it to work)… and then, by accident…

I discovered a hack that made Firefox work!

Look, to give Microsoft a break here, the reason they use their EOT format is to protect fonts from pirates. Each EOT file is tied to a particular domain name, though the same mechanism can be used to make the font free for use everywhere. The theory is that purchased fonts would be tied to a domain (and a license agreement) and free fonts would be freely available to all, but the EOT format would be used in all cases. I purchased a font for the YBCA game, installed it on a particular domain as an EOT, and it works great, but only in Internet Explorer.

Actually it feels like I spent days figuring out @font-face. The difficulty is not just that MS has its own standard – it’s that the feature is so new that there are differences (actually they’re bugs) among how the various browsers handle it. Paul explains that the solution is to find a way to trick each browser into using only the portion of the CSS rule that applies to that specific browser. The final trick that enabled Firefox (for me – and also Opera at the same time) was figuring out when to use and when not to use quotes in the src: url() portion of the CSS rule that reads the fonts.

The most-often-quoted solution page is Paul Irish’s page on @font-face. His solution worked for me, except for FireFox, so you can start with his solution if you wish.

Here’s what worked for me. I just added this to my CSS file for the site, then use class=’headlines’ to style whatever headline element I want the font used in.

One key trick (for me) is to not put quotes around the filenames in the url() portion of the @font-face declaration. The quotes trip up some browsers. Remember that the URLs are relative to your own web server base.

@font-face {
font-family: ‘Headlines’;
src: url(/fonts/SF_Cartoonist_Hand.eot);
src: local(‘Headlines Web Regular’), local(‘Headlines Web’),
url(/fonts/SF_Cartoonist_Hand.ttf) format(‘truetype’);
}
.headlines h2.headlines {
font-size: 15pt;
text-decoration: none;
letter-spacing: 1px;
font-family:Headlines, arial, helvetica, sans-serif;
color:#3FC;
}

The key components are the “@font-face {}” declaration, which points to the EOT file for MSIE, and the TTF file for other browsers, and then the use of the “font-family:Headlines” within the definition of the style “headlines” which style can then be used within HTML pages. You just use it like this:

<h2 class=”headlines”>This is a headline</h2>

Ranked from most useful to least useful:

Beautiful fonts with @font-face {hacks.mozilla.org} a thorough discussion to get you started

Go Beyond Web-Safe Fonts with CSS3 has a few screen shots showing nice uses of fonts {copies a lot of what’s in the others}

Tools:

Microsoft Typography WEFT tool {download this tool (a Windows EXE) that creates the required EOT file for MSIE if you are starting with only a TrueType font}

[1] Pink Yourself at YBCA {revisiting Gran Fury’s SILENCE=DEATH from the 1980s}

[2] @font-face works (with the various hacks described above) in Internet Explorer 8 {MSIE}, Firefox, Safari, Opera. It does not work in Flock. Google has turned it off in Chrome – it’s expected to work at a future date.

[3] The headline font I chose is SF Cartoonist Hand, downloaded from FontSquirrel.com – they have a flurry of @font-face compatible fonts and <whew!> they provide both the TTF TrueType and the EOT Microsoft-compatible files for each font they offer. This is a great source of dozens of free fonts that are ready to download and install, once you have the CSS syntax worked out.