The font-face property is fairly straightforward to grasp and use. Upload
the font you want to use to your Web site (make sure the licence permits it),
give it a name and set the location of the file.
In its basic form, this is what the font-face property looks like:
1 @font-face {(^2) font-family: Museo Sans;
(^3) src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”);
4 }
The two required font-face descriptors are font-family and src. In
the first, you indicate how the font will be referenced throughout your CSS
file. So, if you want to use the font for h2 headings, you could have:
1 h 2 {
(^2) font-family: Museo Sans, sans-serif;
3 }
With the second property (src), we are doing two things:
If the font is already installed on the user՚s system, then the CSS uses the
local copy instead of downloading the specified font. We could have
skipped this step, but using the local copy saves on bandwidth.
If no local copy is available, then the CSS downloads the file linked to in the
URI. We also indicate the format of the font, but we could have skipped
that step, too.
For this property to work in IE, we would also need the EOT version of the
font. Some font shops offer multiple font formats, including EOT, but in
many cases we will need to convert the TrueType font using Microsoft՚s
own WEFT, or another tool such as ttf2eot.