Skip to main content

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.

The @font-face call enables designers to make use of non web-safe fonts served from third party sites

The @font-face call enables designers to make use of non web-safe fonts served from third party sites

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 (opens in new tab) tutorials and examples of CSS (opens in new tab) from our sister site Creative Bloq (opens in new tab).

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.