How to use @font-face

A quick guide on how to use CSS @font-face in order to get custom fonts on any web page.

Firstly, you’ll need to find a nice-looking, free font in order to use it on your web page. Graublau Sans Web by Georg Seifert is a perfect font for our example since it’s free and supports many languages. Download the font on your drive and continue…

In order to support as many as possible browsers and devices, we first need to create and then use different formats of our font (.ttf/.otf, .eot, .woff, .svg etc.). There are numerous tools to convert fonts but the best I’ve come across is FontSquirrel @font-face Generator. A free and pretty fast online tool with many options and features that generates all necessary formats from a single font.

After you convert the font in all formats, create a directory named “fonts” and copy all the fonts formats inside it. Create a new html document in the root directory of your web site (on the same level where the fonts folder resides) and insert the following CSS:

@font-face {
    font-family: 'graublauweb-webfont';
    src: url('fonts/graublauweb-webfont.eot');
    src: local('☺'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
}
h1 {
    font-family:"graublauweb-webfont", Helvetica, Arial, sans-serif;
    font-size:48px;
}

@font-face loads all necessary formats and we set the font-family the same way we would do normally.

It’s best not to use the original font name (e.g. GraublauWeb) in font-family to prevent any user that happens to have the font locally installed, to load it from his/her machine. We need and should load our font that resides on our web server and not on user’s pc, so remember to use different names (e.g. graublauweb-webfont).

Next, we insert our simple markup:

<h1>This is a heading with some custom font.</h1>

That’s about it! Test the page in a browser to see the results.