The @font-face CSS rule has been around since CSS2 (but subsequently absent in CSS 2.1). It was even supported partially by Internet Explorer 4 (no, really)! So what's it doing here, when we're supposed to be talking about CSS3?

Well, as it turns out, @font-face was re-introduced for the CSS3 Fonts module (http://www.w3.org/TR/css3-fonts). Due to the historic legal quagmire of using fonts on the web, it's only in recent years that it has started to gain serious traction as the de facto solution for web typography.

Like anything on the web that involves assets, there is no single file format. Just as images can come in JPG, PNG, GIF, and other formats, fonts have their own set of formats to choose from. The Embedded OpenType (files with an .eot extension) font was Internet Explorer's (and not anyone else's) preferred choice. Others favor the more common TrueType (.ttf file extension), whilst there is also SVGs and Web Open Font Format (.woff / .woff2 extension).

Right now, it's necessary to serve multiple file versions of the same font to cover the different browser implementations.

However, the good news is that adding each custom font format for every browser is easy. Let's see how!

CSS provides a @font-face 'at-rule' to reference online fonts that can then be used to display text.

There are now a number of great sources for viewing and acquiring web fonts; both free and paid. My personal favorite for free fonts is Font Squirrel (http://www.fontsquirrel.com/) although Google also offers free web fonts, ultimately served with the @font-face rule (http://www.google.com/webfonts). There are also great, paid services from Typekit (http://www.typekit.com/) and Font Deck (http://www.fontdeck.com/).

For this exercise, I'm going to download Roboto. It's the Font used for later Android handsets so if you have one of those it will be familiar. Otherwise, all you need to know is that it's a lovely interface font designed to be highly legible on small screens. You can grab it yourself at http://www.fontsquirrel.com/fonts/roboto.

Having downloaded the @font-face kit, a look inside the ZIP file reveals folders of the different Roboto fonts. I'm choosing the Roboto Regular version and inside that folder the font exists in various file formats (WOFF, TTF, EOT, and SVG), plus a stylesheet.css file containing a font stack. For example, the rule for Roboto Regular looks like this:

@font-face {
    font-family: 'robotoregular';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Much like the way vendor prefixes work, the browser will apply styles from that list of properties (with the lower properties, if applicable, taking precedence) and ignore ones it doesn't understand. That way, no matter what the browser, there should be a font that it can use.

Now, although this block of code is great for fans of copy and paste, it's important to pay attention to the paths the fonts are stored in. For example, I tend to copy the fonts from the ZIP file and store them in a folder inventively called fonts on the same level as my css folder. Therefore, as I'm usually copying this font stack rule into my main style sheet, I need to amend the paths. So, my rule becomes:

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

It's then just a case of setting the correct font and weight (if needed) for the relevant style rule. Look at example_05-10, it's the same markup as example_05-09, we are merely declaring this font-family as the default:

body {
  font-family: robotoregular;
}

An added bonus with web fonts is that, if the composite uses the same fonts you are using in the code, you can plug the sizes in direct from the composite file. For example, if the font is 24px in Photoshop, we either plug that value straight in or convert it to a more flexible unit such as REM (assuming a root font-size of 16px, 24 / 16 = 1.5rem).

However, as I mentioned before, we now have viewport relative sizes at our disposal. We can use them here to scale the text relative to the amount of viewport space.

body {
  font-family: robotoregular;
  font-size: 2.1vw;
}

@media (min-width: 45rem) {
  html,
  body {
    max-width: 50.75rem;
    font-size: 1.8vw;
  }
}

@media (min-width: 55rem) {
  html,
  body {
    max-width: 78.75rem;
    font-size: 1.7vw;
  }
}

If you open that example in the browser and resize the viewport you will see that with just a few lines of CSS we have text that scales to the available space. Beautiful!

The @font-face method of web typography is, on the whole, great. The only caveats to be aware of when using the technique with responsive designs are in relation to the font file size. By way of an example, if the device rendering our example required the SVG font format of Roboto Regular, it would need to fetch an extra 34 KB, compared with using the standard web-safe fonts such as Arial. We have used an English subset in our example which reduces the file size but that isn't always an option. Be sure to check the size of custom fonts and be judicious with their use if you want the best possible site performance.