Font Squirrel makes font embedding with CSS a cross-browser reality!
The CSS @font-face rule is hardly new — in fact it was proposed in CSS2 and has even been supported in Internet Explorer since version 4! The problem has always been that different browsers have implemented it in diverse ways. IE, for example has implemented it using the Embedded Open Type format (.eot), whereas Safari, which has supported @font-face since version 3.1 has opted to use TrueType (.ttf) and OpenType (.oft). Now with Firefox (v3.1) and Chrome also supporting @font-face, using it has become an option.
Recently, in my article “Use the Google Font API to break away from web safe fonts” (Nov 20th 2010), I showed you how to use the Google Font API to replace the standard set of web-safe fonts easily. The main limitation of the Google Font API is its limited library (currently only 34 fonts — not many, but still a vast improvement on the standard web-safe set). However, Font Squirrel has (at the time of writing) a total of 634 font families that are all licensed as free for commercial use! many of these fonts can be downloaded directly from the site, but some require you to follow a link to the designer’s or foundry’s site.
There are also hundreds of ready-prepared font kits to download. Each kit contains the following:
- TrueType fonts (Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)
- EOT fonts (Internet Explorer 4+)
- WOFF fonts (Firefox 3.6+, Internet Explorer 9+, Chrome 5+)
- SVG fonts (iPad and iPhone)
- Cufón fonts (in case you want them)
- Demo.html and stylesheet.css examples
You can also make generate your own kits by using Font Squirrel’s @font-face Generator. Here’s an example of how, using Sansation by Bernd Montag (available from the Font Squirrel site):
1 First, go to the Generator (http://www.fontsquirrel.com/fontface/generator) and click the ‘+Add Fonts’ button to add the Font from your system — navigate until you locate the font and click OK. You can process several fonts at once, but as the state, the generator is processor intensive, so be kind and don’t generate more than a few at a time.
2 Click the Agreement check box (remember, you can only use fonts that are licensed for use online), then simply click the ‘Download Your Kit’ button.
3 You should now have downloaded the font kit which contains the following files:
- generator_config.txt
- sansation_demo.html
- sansation_regular-webfont.eot
- sansation_regular-webfont.svg
- sansation_regular-webfont.ttf
- sansation_regular-webfont.woff
- specimen_files
- stylesheet.css
generator_config.txt contains any customized settings you may have used when generating your fonts, and can be uploaded to the generator to set it up for processing fonts using the same settings.
sansation_demo.html contains a demonstration page using the webfonts at all difference sizes, a sample layout using the fonts, a complete listing of available characters in the webfonts & full instructions for their use.
The 4 files, .eot, .svg, .ttf & .woff are, of course, the generated web fonts.
specimen_files just contains some CSS and Javascript that is used for presentation on the demo.
stylesheet.css contains the necessary CSS for use on your site.
4 Rename the folder (eg: webfonts) then upload the folder to your server and link to the CSS in your html:
<link rel="stylesheet" href="webfonts/stylesheet.css" type="text/css" charset="utf-8" />
5 Now to use the font (for example as an <h1> title), simply specify it in your CSS (remembering to provide an alternative stack for unsupported browsers):
h1 {
font: 28px SansationRegular, Verdana, Arial, Helvetica, sans-serif;
color: #61b2f3;
padding-bottom: 10px;
}