HTML and CSS Reference
How to add a Web Font to your page…
So you've got a special font you want to add to your page? Let's step through how to do that using
Web Fonts and the @font-face rule in CSS.
Step one: Find a font
If you don't have a font, like Tony does, you'll want to visit the many sites out there that have both
free and licensed fonts you can use in your pages (check out the appendix for more information).
We're going to use Tony's suggestion, Emblema One, which is a free font.
Step two: Make sure you have all the formats of the font you need
Here's the good news on Web Fonts: the @font-face CSS rule is pretty much a standard across
modern browsers. Here's the bad news: the actual format used to store the fonts isn't quite yet a
standard (although we're getting there), and in fact there are several different formats (at the time
of writing) supported across the browsers to varying degrees. Here are the common formats (and
their respective file extensions):
True Type and OpenT ype fonts are clos ely related;
Ope nType is built on top of TrueType (and is
new er than TrueType ).
TrueType fonts: .ttf
OpenType fonts: .otf
Embedde d OpenType (EOT ) is a compact fo rm of OpenType .
It's propr ietary (Microsof t), and supported only on IE.
Embedded OpenType fonts: .eot
SVG fonts: .svg
Web open f ont format is based on TrueType, and is being developed as a
standard f or Web Fonts. It's well supported on m ost modern browsers.
Web open font format: .woff
The best supported format across most modern browsers is web open font format, so that's
the one we recommend you use. You can offer an alternative for older browsers; we'll use
TrueType as that's well supported across all browsers too (except IE).
Step three: Place your font files on the Web
You'll want to place your font files on the Web, so they are accessible to your user's browsers. Or
you can use one of the many font services coming online that will host these files for you. In
either case, you'll need the URL of your font files. Here are Tony's files, which we've placed on