HTML5 Series - Fonts

12 December 2012

It's an all to common story, designer designs a website hands it to a developer who then goes, "what kind of font is that?" and get's the response of some completely unheard of name. The developer then try's to explain what a web safe font is and they agree to use Arial.

With CSS3 custom fonts are now a reality. On the item you are styling you still set the font family in the same way but additionally in your CSS you specify a @font-face rule so the browser can find out what the font is. The @font-face rule should specify a name and the src of the font. e.g.

1@font-face {
2     font-family: myFont;
3     src: url('myFontFileName.ttf');
4}

One point to note different browsers support different font type. Luckily though you can specify multiple sources for your font.