I just used the @font-face CSS rule to change the font of this website and use a nicer one: Open Sans.
@font-face is supported by all modern desktop browsers, including IE (since version 5.5!). The stock Android browser also supports it, but I have no idea about iOS or Windows Phone.
How does it work? It’s very simple: you define a custom font-family using a @font-face CSS rule:
@font-face {
font-family: "My Font"; /* Name of the new font-family we are creating */
src: url(http://full.url.of/the-font.odf);
font-weight: 400; /* Default weight for "normal" text */
}
You can then use the custom font in any font-family rule:
p {
font-family: "My Font", Verdana, Arial, sans-serif;
font-size: 13px;
}
If the browser doesn’t support @font-face, it will fallback to the next font in the list, as usual.
The very nice thing is that Google decided to publish 500+ free-to-use fonts: enter the Web Fonts project. The online dashboard allows you to select the fonts you want to use in your website, and link to them with a simple <link rel="stylesheet" /> tag pointing to Google’s fast CDN and including all the selected fonts.
@font-face seems to have been around for a while, but I must have missed it. It’s actually a very brilliant yet simple solution to escape the boring typical Verdana, Arial, sans-serif font-family declarations we see on most websites.