Using @font-face to style web 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:

@font-face {
font-family: “Your chosen typeface”;
src: url(“URL/filename.eot”);
src: local(“your website directory”),
url(“type/filename.woff”) format(“woff”),
url(“type/filename.otf”)
format(“opentype”),
url(“type/filename.svg#filename”)
format(“svg”);

This will now call the same font, either through the @font-face CSS specification or the .woff file.

Want to learn more about CSS and JavaScript? Check out the top CSS and JavaScript tutorials and examples of CSS from our sister site Creative Bloq.