Styling Web Forms and Views with CSS3 - HTML5 Programming for ASP.NET Developers - page 330

url('Fonts/Magenta_BBT-webfont.svg'),
url('Fonts/Magenta_BBT-webfont.woff');
}
The @font-face rule begins by defining a font family named MyWebFont. The font-family name can
be any developer-defined name. If you have multiple @font-face rules, each should have a unique font-
family name to avoid ambiguity. The src property then points to one or more URLs where the font files are
located, using the url() function. In this example, all the font files are located in a folder named Fonts . For
each font format that you wish to support, you must specify a URL.
Once you define a custom font definition using @font-face , you can use that font in other CSS rules.
For example, the following CSS rule uses MyWebFont for <h1> tags:
h1 {
font-family: 'MyWebFont';
font-size:40px;
text-align:center;
}
As you can see, in a CSS rule you can use the custom font like any other standard font. In this case, the
font-family property is set to MyWebFont , and the font-size and text-align properties are also set. Figure
13-9 shows a top-level heading in the browser.
Figure 13-9. @font-face applied to a page heading
Even if the local machine doesn't have a specific font, the web page can display text in that font
because @font-face provides the location of the font files.
If you're using a font from Google Web Fonts, then you don't need to define a font with @font-face
because that is already done for you. All you have to do is refer to a style sheet provided by Google Web
Fonts and then use the font-family name in your CSS rules. For example, if you click the Quick Use button
for the font Peralta, you see a style-sheet reference link and a font-family name (Peralta). With this
information, you can define a CSS rule as follows:
h2 {
font-family:'Peralta';
font-size:20px;
text-align:center;
}