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.
Make Fewer HTTP Requests
@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.
<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.
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:
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.