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;
margin: 0; padding: 0;
font: 56px 'Soviet', 'Trebuchet MS', Sans-serif;
letter-spacing: -3px;
text-decoration: none;
color: #000;
top: 58px; left: 300px;
}
This causes compatible web browsers to download the Soviet Font from my site and correctly display the site title.
Of course, not many web browsers today support Web Fonts (according to my tests, only WebKit nightlies have the correct display), but things will change shortly, as Firefox 3.5 should support them.