The landscape of web typography is changing quickly these days. We’ve gone from the wild west days of sIFR to Cufón to finally seeing font embedding seeing wide spread adoption by browser developers (and soon web designers) with @font-face. For those who’ve felt limited by the typographic possibilities before, this has been a good year.
As Mark Boulton has so eloquently elucidated, @font-face embedding doesn’t come without its drawbacks. Font files can be quite large and FOUT—that nasty flash of unstyled text—can be a distraction for users.
Data URIs
We can battle FOUT by using Data URIs. A Data URI allows the font to be encoded right into the CSS file. When the font comes with the CSS, the flash of unstyled text is mitigated. No extra HTTP requests are required.
Don’t be a grinch, though. Sending hundreds of kilobytes down the pipe still isn’t great. Sometimes, all we want to do is spruce up our site with a little typographic sugar.
Be Selective
Dan Cederholm’s SimpleBits is an attractive site.
Take a look at the ampersand within the header of his site. It’s the lovely (and free) Goudy Bookletter 1911 available from The League of Movable Type. The Opentype format is a respectable 28KB. Nothing too crazy but hold on here. Mr. Cederholm is only using the ampersand! Ouch. That’s a lot of bandwidth just for one character.
Can we optimize a font like we can an image? Yes. Image optimization essentially works by removing unnecessary image data such as colour data, hidden comments or using compression algorithms. How do you remove unnecessary information from a font? Subsetting.
If you’re the adventurous type, grab a copy of FontForge, which is an open source font editing tool. You can open the font, view and edit any of the glyphs and then re-generate the font. The interface is a little clunky but you’ll be able to select any character you don’t want and then cut the glyphs. Re-generate your font and you’ve now got a smaller file.
There are certainly more optimizations that can also be made such as removing hinting and kerning information. Keep in mind that removing this information may affect how well the type renders.
At this time of year, though, I’m sure you’re quite busy. Save yourself some time and head on over to the Font Squirrel Font Generator.
The Font Generator is extremely handy and allows for a number of optimizations and cross-platform options to be generated instantly. Select the font from your local system—make sure that you are only using properly licensed fonts!
In this particular case, we only want the ampersand. Click on Subset Fonts which will open up a new menu. Unselect any preselected sets and enter the ampersand into the Single Characters text box.
Generate your font and what are you left with? 3KB.
The Font Generator even generates a base64 encoded data URI stylesheet to be imported easily into your project.
Check out the Demo page. (This demo won’t work in Internet Explorer as we’re only demonstrating the Data URI font embedding and not using the EOT file format that IE requires.)
No Unnecessary Additives
If you peeked under the hood of that demo, did you notice something interesting? There’s no <span> around the ampersand. The great thing about this is that we can take advantage of the font stack’s natural ability to switch to a fallback font when a character isn’t available.
Just like that, we’ve managed to spruce up our page with a little typographic sugar without having to put on too much weight.
Comments
Got something to add? You can just leave a comment.
19/12/2009
Thanks for the tips – this is very helpful!
The flash of unstyled text is probably my biggest gripe with font-face, apart from the actual weight payload required.
I knew base64 encoding in the CSS was possible, but I didn’t like that option as the fonts end up being very large, like you said. The font optimization makes sense, assuming you don’t change the text often. If you do need to change the text, you will have to add more characters and reoptimize the font, which I could imagine could be a bit of a pain.
19/12/2009
Thanks for the tip. I’ve become fascinated by recent developments with @font-face and the WOF format and SVG in particular. I’m really glad to see font foundries getting on board with font embedding on the web. It’s a great thing for the web and Typography in general.
For your example with the Goudy ampersand it would probably achieve the smallest possible bandwidth as raw outline paths in SVG – But that wouldn’t be as simple to implement ;)
19/12/2009
Very nice! I didn’t know about the online tool to do the hard work for you, that really helps!
Also worth mentioning: Base64-encoded data URIs are 1/3 larger in size than their binary equivalent, so beware if you are encoding anything rather large, as it will get larger…
19/12/2009
Elegant! I like the use of the fallback. Thank you for the tip!
19/12/2009
I just can’t seem to get as giddy as everyone else about @font-face embedding. The straight-forward implementation is only good for FF and Safari users. You need to make an EOT for IE and it typically looks really shitty because most fonts aren’t designed for ClearType (a problem for all Windows users, really), and then you need SVG to get Chrome to behave.
Screw it. Cufon for me for the foreseeable future.
19/12/2009
Um, I thought data uris didn’t work in IE 7 an below, and even has his quirks in IE8.
But great article as always, Mr. Snook.
19/12/2009
Thanks for this — making @font-face actually usable is the difficult bit.
And the way you’ve got rid of the span around the ampersand is really inventive.
19/12/2009
@Derek Anderson: Base64 encoding increases the size by about 1/3, yes, but gzip compression brings the size down to about what it was before.
@Colin Williams: That’s why I mention the Font Generator. It’s a one-step process to generate an EOT, SVG, and modified TTF/OTF file. It even gives you a CSS file to work with. Yes, there can be rendering issues and Ethan from Font Squirrel (among a few others) have been working hard to understand these issues to produce better output.
@David Rojas: IE7 doesn’t support data URIs but it also doesn’t support TTF font embedding, just EOT. Therefore, the data URI approach is intended for all browsers but IE (even IE8). Those browsers would still continue to access the EOT file from the server. Subsetting would still reduce the overhead though, and this is still an important takeaway from this article.
19/12/2009
For me, using Safari 4, the Goudy Bookletter ampersand didn’t show until I edited the HTML to ‘&’ and not ‘&’.
20/12/2009
28KB before. What the size is “after”? Still was wondering to see an answer somewhere in the end :-)
20/12/2009
@Michael Hessling: I just tested it in Safari 4.0.4 in Windows and it works fine.
@Osvaldas: It’s in the article (just before the last image): 3KB.
21/12/2009
@Osvaldas — Generate your font and what are you left with? 3KB.
22/12/2009
When I convert Arial Black to svg my layout is getting mangled if I only choose the individual characters I need before conversion. When I select all uppercase and numerals the layout is fine. There are no spaces where the font is being used, tested with the space character anyway. Can anyone guess what might be happening? I’m using the font for simple one-letter/numeral headings.
27/12/2009
Great tips in here, Jonathan. Short and sweet. Thanks!
Commenting is closed for this article.