Fun with fonts
Ok, disclaimer...this is all over the web at this point, but I feel compelled to share again.
Fonts
You can use fonts fairly effectively and reliably on the web now :) Graphic designers and SEO folks can now meet in the middle to bring more effective content to the web.
This page is displays the use of the @font-face spec found in CSS3. Without getting too uppity and derisive, has been around for quite some time in IE. 'Nuff said on that.
Here it is...
IE supports .eot (embedded open type). Other standards compliant browsers support .ttf (TrueType) or .otf (OpenType) files. While Woff(web open font) is an up and coming web standard, it seems that .otf are the standard at the moment, so I don't bother with .ttf or .woff files.
So, the thing you'll ask first is, where do I get .eot files? You can convert your .ttf and .otf files to .eot files either on your own by getting Font Forge and Weft from Microsoft, OR simply do it online courtesy of the OnlineFontConverter or at FontSquirrel! I recommend doing it online, it's easy and free! Gotta love open source :)
Take the .otf and .eot files, put them up on your server, and declare them in your CSS file. Woohoo!
Here is code that is likely to work well. This takes into account various browsers in it's construction. A more complete version would have woff (Web Open Fonts) and svg files for forward thinking reasons.
@font-face {
font-family: "Font Name"; // Name the font.
src: url("type/FontName.eot"); // Offer the IE preferred font first.
src: local("Alternate name"), local("Alternatename"), // Use local() here so to confuse IE.
url("type/FontName.otf") format("opentype"); // IE will try to use the last declared
} // font, but this declaration is ignored by IE.
Articles regarding the @font-face:
- Always a great resource for typography: Nice Web Type
- Jonathan Snook has a great screencast about converting.
- As has been said over at Nice Web Type, Paul Irish offers us detailed explanation of how best to order your code to trick some/all browsers into serving up the correct font, or just not breaking.
Oh, and some tags for the page: