CSS 3 Web Fonts

21 Jun 2009 by David Corvoysier

Among other cool things, CSS 3.0 finally introduces an old feature that had only been implemented so far using proprietary extensions, and therefore did not receive the attention it deserved: Web Fonts !

As specified in the CSS Fonts Module Level 3 specifications, web developers can insert @font-face CSS rules into their stylesheets to specify explicitly the location of the font resource corresponding to a font face specified in that stylesheet, thus allowing a consistent rendering of their site.

For instance, I use the "Soviet" font family for the title of this blog, but this font is not so common, so I inserted the following code in the site main stylesheet:

@font-face {
font-family: "Soviet";
src: url("./fonts/Soviet2.ttf") format("truetype");
}


And in the CSS rule corresponding to the site title:

#header h1#logo-text a {
position: absolute;