HTML and CSS Reference
In-Depth Information
You can select font formats to download. By default, the TIF, EOT, WOFF, and SVG formats are selected.
The downloaded
@font-face
kit (a Zip file) contains all the font formats, licensing information, and a demo
HTML page.
There is an alternative to downloading a
@font-face
kit from a web site and then uploading it to your
own web site: Google Web Fonts. Google Web Fonts offer web fonts to use in your web pages without any
need to download them. All you need to do is to add a Style Sheet reference in your web pages, as
instructed on the Google Web Font web site (
www.google.com/webfonts
). At
runtime, the Google Web Font
web site automatically detects the browser and sends it a font in a supported format. Figure 13-8 shows the
Google Web Fonts web site.
Figure 13-8.
Google Web Fonts web site
In the following section, you learn how to use
@font-face
kit files as well as the Google Web Fonts web
site.
Using @font-face Rules
Now that you know what web fonts are and how to get them, let's see how you can put them to use in a web
page. Suppose you've downloaded the Magenta font mentioned in the preceding example. To use that web
font, you need to create a custom font definition in your style-sheet file. A sample font definition is shown
here:
@font-face
{
font-family: MyWebFont;
src: url('Fonts/Magenta_BBT-webfont.ttf'),
url('Fonts/Magenta_BBT-webfont.eot'),
