Mozilla Web Development

@font-face Hacks

I’m going to make a bold prediction on the night before a certain web browser is scheduled gets an upgrade. @font-face (MDC) will change web design, but not just for typography. As I suggested a few days ago, to use a font on the web it needs to sit on a webserver so the browser can download it, hence the website is “distributing” the font. Licensing for many fonts doesn’t currently permit this, making @font-face for fonts somewhat problematic and hard to use… at least today.

Cool Trick!

Rule #1 of Steve Souders popular book “High Performance Web Sites” is simply:

Make Fewer HTTP Requests

That said, @font-face can be essentially as an image sprite by creating your own font with the glyphs you want. Unlike image sprites they aren’t hacky in nature requiring tricky coordinates, nor are they obnoxiously memory intensive (and a drag on mobile devices). Firefox also loads fonts last, so you can be assured it won’t slow down the rest of your page. They also degrade nicely for devices that don’t support them.

Of course this changes webdesign to use simpler icons and pick 1 color per glyph… but there are some pretty interesting enhancements for example the ability to scale. Fonts are designed to resize much better than an image.

The other caveat is that this can make your markup slightly ugly. However it’s not so bad when your building something in JavaScript. Consider for example implementing Pac-Man. Rather than a dozen images, or some complex sprite you can simply move <em>p</em> around. You can have quite a few glyphs in 1 font file.

Of course you can also use <canvas/> or a data: URL to embed images, but IE doesn’t support <canvas/> and only recently started supporting data:. IE has supported OpenType (not TrueType) fonts since IE 4.

I’d be curious if anyone actually implements this and how well it works in practice. It’s not a true replacement for image sprites, but for a few cases, such as simple icons, it could actually do the trick.

Um What?

This trick can also be engineered to work against the way the web traditionally works. For example, I could create a ROT13‘d font or any other encoding I imagined. This essentially lets you remap the way characters are on the page, and the way they appear. For example on the page may appear:

<span class="rot13font">rknzcyr@qbznva.gyq</span>
<small><strong>Note:</strong> Do not copy/paste my email address</small>

That looks like a totally invalid address, but with a ROT13 font, you’d know what it is… though if you copy/paste it you’re going to get the encoded version. (I could in theory course engineer some JS to ROT13 the string). This also could deter some spam bots, which lore says have found ways around JS munging.


Moral of the story: @font-face can be fun for more than just typography. Cult of Helvetica be damned… all you typography geeks.

5 replies on “@font-face Hacks”

I saw a similar trick, I can’t remember where, that replaced the name of companies with their logotype via font-face.

They didn’t explain how they achieved it but I guessed that they were using a specially created font where each letter was blank, except for a single character used in the company name which was replaced with the whole logotype. By surrounding the name with a span and setting a font the text is replaced with the logo. Quite a neat, yet accessible and gracefully degrading, hack. The same thing could be used to add signatures.

Does font-face src support a data: URL as this would allow local storage of the font and so a lot quicker?

Unless you really plan it out, this is going being a tough. I am not trying to say do not do it, I am just saying your going to have to go all the way with it.

Leave a Reply

Your email address will not be published. Required fields are marked *