Embedding Web Fonts - Beginning CSS3 - page 75

Ti ■ Font squirrel ( www.fontsquirrel.com ) offers a wide range of web fonts that are free for commercial use.
most are supplied as an @font-face kit, which contains all formats needed for cross-browser compatibility. The
companion Fontspring site ( www.fontspring.com ) performs a similar service for commercial fonts.
Checking the License
Although most modern browsers support OpenType and TrueType fonts, many font foundries expressly forbid
embedding them in web pages. So, it's important to check the license. Because each font designer, foundry, and
distributor has different rules regarding the use of fonts, it's impossible to give blanket advice in a book. Check
with the supplier. If in doubt, don't use the font in your website. Using a font in violation of the license could turn
into an expensive mistake.
The Font Squirrel and Fontspring websites have a prominent link to the license that applies to each font, so
you can check its conditions before deciding whether to download it. Many fonts on the Font Squirrel site use the
SIL Open Font License ( http://scripts.sil.org/OFL ) , which allows the font to be used and redistributed freely
as long as it is not sold separately. All web fonts used in this chapter come under this license. Other fonts are
governed by individual licenses that impose simple requirements, such as adding an acknowledgment and link
to the font creator's website in your style sheet.
Embedding Fonts with @font-face
Before you can use a web font in your styles, you need to tell the browser where to find the necessary font files
with an @font-face rule.
Basic Syntax
An @font-face rule is made up of what the CSS specification calls descriptors , which define the location and style
characteristics of the font. The basic syntax looks like this:
@font-face {
font-family: font name;
src: location [format];
}
The font-family descriptor defines the name of the web font. You can choose any name you want. If it
contains spaces, the name must be wrapped in quotes. If you choose the name of a font that already exists on a
user's computer, the font specified in the @font-face rule takes precedence.
The src descriptor tells the browser where to find the font files. Specify multiple values for different font
formats as a comma-separated list.
You can try to load a local version of the font if it exists on the user's system by inserting the font's full name
or Postscript name between the parentheses after local() . The required name differs according to the font and
operating system, so the CSS specification recommends using both.
However, the normal practice is to load the font files from your web server. You specify the location by
inserting the path between the parentheses after url() , as described in “Specifying Background Images and
Other Files” in Chapter 3 . The files must be located on the same domain as the website.
After the location, you can add an optional format() declaration, using one of the format strings listed
in Table 5-2 .