How to use @font-face

Firstly, you’ll need to find a nice-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 need to first 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.

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.