CSS 3 Web Fonts basics

Web Fonts allow you to download a specified font file along with a Web site and then make use of it on that Web site, so it doesn't need to be installed on your site visitor's computers. To include the font along with the Web site download, you use the following syntax:

@font-face {
  font-family: "My font";
  src: url("http://www.myweb.com/fonts/myfont.ttf") format("truetype");
}

You declare your custom font inside a @font-face construct (do it at the start of your stylesheet, before you set any fonts), then refer to it in your stylesheet as normal, for example:

p {
  font-family: "My font gothic";  
  ...
}

the above example uses a truetype font, but you can also use opentype fonts in the same kind of manner:

@font-face {
  font-family: "My opentype font";
  src: url("http://www.myweb.com/fonts/myopenfont.otf") format("opentype");
}

As if Web Fonts weren't cool enough already, we've also added support for SVG fonts. This allows you to use SVG font files in your web pages (in both HTML and SVG files in fact) in the same way:

@font-face {
  font-family: "My SVG font";
  src: url("http://www.myweb.com/fonts/myfont.svg#myFont") format("svg"); 
  font-style: normal, italic;
  font-weight: 500;
}

SVG fonts are defined in SVG files using font or font-face elements, inside which each individual glyph is mapped out in a glyph element. This may sound complicated, but it's really not — especially given that there is a free program called FontForge that can convert between the various font formats. Check out the source code of the UbuntuTitleBold SVG font to get an idea of what SVG fonts look like.

Another very nice thing about SVG fonts is that it's possible to modify the fonts in the client using the DOM or via SMIL — it is after all well-formed XML. Nothing would prevent someone from writing a web application allowing you to edit a font, and then have a construct on the server-side generate a custom TrueType font file from it. You could also animate fonts in this manner, if you so desired.