HTML and CSS Reference
In-Depth Information
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
wickedlysmart.com
:
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf
