Distributing Fonts Via @font-face

Instead of using images, Flash or JavaScript to replace normal text with non-standard fonts, you can now use CSS’s @font-face rule. It will tell the browser to download the fonts and render the text using them. Internet Explorer uses the EOT format and everyone else uses TrueType, so you need to declare the sources in a specific order to make it work across browsers.

@font-face
{
  font-family: 'Angelina';
  src: url('lib/fonts/angelina.eot');
  src: local('Angelina'),
  url('lib/fonts/angelina.ttf') format('truetype');
}

You can get compress and convert a font to TTF and EOT versions with Font Squirrel’s generator.

Because they’re being distributed, though, they need to be licensed for that. A couple good places to get freely distributable fonts are The League of Movable Type, Font Squirrel and dafont.com.

Leave a Reply

Your email address will not be published. Required fields are marked *