As soon as I learned about the @font-face CSS declaration, my life as a designer changed permanently. A whole world of possibilities are opened up by this feature – no more relying on Arial, Verdana, Georgia and all the other “web safe” fonts. Not that there is anything inherently wrong with those fonts, but after seeing them day after day on the web, I know I long for a bit of variety.
However, just because a font is @font-face compatible doesn’t mean it’s necessarily good for the purpose you want to use it. The obvious examples are there – don’t use display fonts as your body text, for example – but some fonts just aren’t great for the web (or great at all… or good… or passable).
So I’ve come to save the day with my opinions. Here’s the 10 Best @font-face Fonts, broken into Display (aka Heading 1, Heading 2 etc) and Body listings.
DISPLAY
Use these guys for your H1, H2 etc tags – but if you set your body text in them, I’ll come right through the internet and beat you up.
Museo & Museo Slab
The Museo family has exploded in popularity, and with good reason – it’s a well-designed typeface all around, unique & usable with character. Museo & Museo Slab are great options for headings on your site using the @font-face declaration.
Hit the jump for the rest of the 10 Best @font-face Fonts! (more…)
