Fonts on the web
Friday, November 13th, 2009
It is hard for a web designer to not get excited about the thought of having more fonts than you can count on your fingers available to make beautiful websites. Luckily, we don’t have to keep dreaming.
Text-as-images, SIFR, Cufon… Web designers have been clamoring for more than the default set of Georgia, Helvetica, Palatino and Verdana for ages. And oddly enough it was Internet Explorer, the bane of many a web designers existence, that supported importing fonts first (IE 4!). Though, in true Microsoft fashion, IE only supported (and still only supports) a proprietary format.
Firefox and Safari, in their latest versions, support the more common .TTF and .OTF files. Firefox 3.6 will support .WOFF which hopes to be the new standard in web font filetypes. Chrome supports .TTF and .OTF as well, but defaults with them disabled at the moment as the dev team is looking into potential security issues.
So. The majority of the internet has the capability to view embedded fonts. Now what?
Getting your font on
You’ve really only got two options; go with a hosted service like Typekit, or roll-your-own manually using something like the awesome FontSquirrel @font-face generator.
How these services work
Typekit requires that a bit of javascript be inserted into the head of your HTML. That code is then used to pull in the font files that are in your “kit”. Using the web interface you can sort through fonts, add the fonts you like to your kit, assign them to elements, id’s or classes, and hit publish. That’s it.
The FontSquirrel generator doesn’t require any javascript. Simply upload the font that you would like to use to the generator, check off the types of files you’d like it to make, choose to eliminate any extraneous glyphs, and hit generate. A ZIP file with a HTML example page, CSS file withbulletproof @font-face syntax and all the converted font files is then served up. Drop the generated CSS into your stylesheet, specify your new font on some elements and save it. Upload the CSS along with the font files and you’re done.
My preference is the roll-your-own method. First of all, it’s free. Second, the FontSquirrel generator lets you select what kinds of glyphs you want to be included in your font file. Why would you want to do that? To reduce file size. Unless, of course, you really need all those accented vowels. Third, you don’t need to go to or rely on another site to manage and host your fonts.
Both options are good choices. And damn, does it feels good to finally have choices.
Category Art, Design, Internet | Tags:
Social Networks : Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.