Want to swap your web-safe fonts for some attractive headers? Here's how to use CSS3 and Web Open Font Formats to create striking type
The @font-face command and Web Open Font Formats (.woff files) now enable designers to create and link to a specific, traditionally non-web-safe font in all modern browsers, including Internet Explorer 9.
While @font-face calls a font hosted somewhere else, a .woff file is a wrapper for any TrueType, OpenType, or Open Font Format compressed into a .woff file and embedded in a web page.
When a visitor lands, either the @font-face font is linked to, or the .woff file is uncompressed within the browser, making the font available even if your viewer doesn’t have it on their machine.
It’s still early days, but by using CSS3’s @font-face function to call the font you can create, save and deploy better, more design-inspired type treatments to your sites without losing SEO functionality.
01 Make it You can use @font-face to call in any non-web-safe font from an open source library or use a generator to create your own, such as www.fontsquirrel.com/fontface/generator. Make sure you have the appropriate licence though.
02 Declare it You need to use the @font-face declaration to call the font page:
@font-face { font-family: “Your chosen typeface”;
03 Link to it You need to either link to your @font-face file or embedded .woff file locally. Use the following: