css: using the @font-face directive

The secret to web fonts is a CSS command called the @font-face directive.

This command at its most basic names the font and tells the browser where to find the
font file for download.

You place the @font-face directive in your style sheet, just like a regular style.

For example, say you’re using the League Gothic font. You have a True Type file named League_Gothic-webfont.ttf inside a fonts folder on your site.

You’d instruct a browser to download this font by adding the @font-face directive to your style sheet like this:

The first property, font-family, you’ve seen before (page 127), but here it has a different purpose. When used inside an @font-face directive, font-family assigns a
name to the font.

When used inside an @font-face directive, font-family assigns a
name to the font.

For example, say you want to use the League Gothic font for all paragraphs
on a page. You could then use this style: