The @Font-Face Rule and Implementation Tricks

, , Leave a comment

@font-face method is frees designers from the yoke of the standard palette of "web-safe" system fonts that have been used for many years. Surprisingly, however, this capability has been available in Internet Explorer since 1997. IE4 was the first browser to allow web fonts, but it did so with a proprietary format that prevented other browsers from following suit. Microsoft has since submitted its format to the W3C for consideration as a standard, but now that Firefox, Safari, Chrome, and Opera are all implemented now. So you can consider it pretty safe to use.

The @font-face Rule

To display web (or nonsystem) fonts on your pages, you need to use the @font-face rule. This rule defines the font and provides the browser with the location of the file to use. Here’s the basic syntax:

@font-face {

font-family: name;

src: local('fontname'), url('/path/filename.otf') format('opentype');

}

I'll break this down a little. First, I give the font a name with the font-family property. This property is one you should be familiar with, although it serves a slightly different purpose here; I'm using it to declare a font name, not to refer to one. Just like the font-family property in CSS2, you can use multiple, space-separated words as long as you enclose them within single quote characters.

Next is the src property, which tells the browser the location of the font file. This property accepts a few different values: local uses the name of the source font to check if the font is already installed on the user's machine, url provides a path to the font if it's not available locally, and format specifies the font type.

I can supply many different values for the src property by separating the values with commas, as I've done in the code example. This utilizes the power of the cascade to allow different fall-back values.

To use the font I just defined, I call only its name in the font stack, as I'd normally do:

E { font-family: FontName; }

For this example, I’ll apply the Chunk font (you can download  free from http://www.theleagueofmoveabletype.com/fonts/4-chunk/) to an h2 element using @font-face.

Here’s the code I’ll use in my stylesheet:
{code}@font-face {

font-family: Chunk;

src: local('ChunkFive'), url('ChunkFive.ttf')

format('truetype');

}
 

h2.webfont { font-family: ChunkFive, sans-serif; }{/code}
The first step is to name my font; I’ve chosen Chunk because I can remember it easily, but I could use any name. Next I provide values to the src property: local uses the true name of the font, 'ChunkFive', to check if it's available on my system. Following that I enter a relative path to the font file I want to use , and finally, I assign an argument of truetype to the format value.

In the last line of CSS , I give my new font name as a value to the font stack to be applied to h2 elements with a class of webfont. To see how that displays, here’s a quick comparison using the following markup:
{code}<h2>This is a web font</h2>

<h2 class="webfont">This is a web font</h2>{/code}

If you want to use a different face, such as a bolder weight or an italic type, you have to define each font face individually. You can use one of two methods to do this. The first method re-uses the same name and adds extra descriptors to the @font-face rule:
{code}@font-face {

font-family: 'Museo Sans';

src: local('Museo Sans'), url('MuseoSans_500.otf') format('opentype');

}
 

@font-face {

font-family: 'Museo Sans';

font-style: italic;

src: local('Museo Sans'), url('MuseoSans_500_Italic.otf') format('opentype');

}
 

h2 { font-family: 'Museo Sans', sans-serif; }{/code}
Here, you can see that the first @font-face rule defines the font name as Museo Sans and gives the URL of the regular face . The second @fontface rule uses the same font name but adds the font-style property with the italic value, and the URL points at the font’s italic face. The advantage of this approach is that the italic style is applied automatically and appropriately, without your having to define it in the CSS, as in this example markup:
{code}<h2>This is example</h2>

<h2><em>This is example</em></h2>{/code}

The second h2 element uses the italic font face defined in the previous rules .

The second method uses unique names for each font style and calls them individually in the font stack:
{code} @font-face {

font-family: 'Museo Sans';

src: local('Museo Sans'), url('MuseoSans_500.otf') format('opentype');

}

 

@font-face {

font-family: 'Museo Sans Italic';

src: local('Museo Sans'), url('MuseoSans_500_Italic.otf') format('opentype');

}

 

h2 { font-family: 'Museo Sans', sans-serif; }
 

h2 em {

font-family: 'Museo Sans Italic', sans-serif;

font-style: normal;

}{/code}

In this example, the first @font-face rule is named Museo Sans, and the URL points to the regular font face. The second @font-face rule is named Museo Sans Italic, and the URL points to the italic face. The font stack for the h2 element uses the regular face, whereas the font stack for the em element, which is a child of h2, uses the italic face.

You’ll notice that I also added a font-style property with the value of normal , as otherwise Firefox artificially italicizes the italic giving you a double italic!

Which method you use is up to you; popular opinion on the Web seems to be swinging toward the second, but you should experiment and see which one most suits your purposes. In some situations, you may have no choice; for example, Safari doesn’t recognize the CSS2.1 font-variant property (used for applying small caps) when using the first method.

True vs. Artificial Font Faces

One thing to be aware of is that no matter which method you utilize, if you want to apply a different font face for example, italic make sure you define a link to the relevant file in your @font-face rule. If you don’t, some browsers will attempt to re-create the face artificially, often

with ugly results. Here’s an example of how not to define an italic weight:
{code}@font-face {

font-family: GentiumBookBasic;

src: local('Gentium Book Basic Regular'), url('GenBkBasR.ttf') format('truetype');

}
 

h2 {

font-family: GentiumBookBasic, sans-serif;

font-style: italic;

}{/code}
You can see that my @font-face rule uses the regular face of the Gentium Basic font, but the h2 element has an italic style declared on it. Before I show you how that renders, here’s the way I should have done it:
{code}@font-face {

font-family: GentiumBookBasicItalic;

src: local('Gentium Book Basic Italic'), url('GenBkBasI.ttf') format('truetype');

}

h2 { font-family: GentiumBookBasicItalic, sans-serif; }{/code}

In this code, the @fontface rule defines the italic face of Gentium Basic, which is then applied to the h2 element.

As you can see, the two examples are quite different. The first is the default font slanted to fake an italic; the characters are larger, slightly distorted, and spaced inconsistently. The second is the true italic font face, which uses characters designed specifically for this purpose.

Be aware of this issue when using Firefox and Internet Explorer; in situations where the “bad” code example is applied, WebKit ignores the font-style property and displays only the regular font face. The same warning applies for all the different font faces: bold, italic, bold italic, small caps, condensed, and so on.

Web Fonts Example

Having discussed the intricacies and niceties of fonts, licensing, and multiple syntaxes, let’s put everything we’ve learned so far together and see @font-face in action. I’ll use an example that compares text displayed in a standard sansserif font (Arial) to the same text displayed in three different font families.
Here’s the CSS for this example. 
{code}@font-face {

font-family: 'Candela';

src: local(''), url('CandelaBook.ttf') format('truetype');

}
 

@font-face {

font-family: 'Candela';

font-style: italic;

src: local(''), url('CandelaItalic.ttf') format('truetype');

}
 

@font-face {

font-family: 'Candela';

font-weight: bold;

src: local(''), url('CandelaBold.ttf') format('truetype');

}
 

@font-face {

font-family: 'ChunkFiveRegular';

src: local(''), url('Chunkfive.ttf') format('truetype');

}
 

@font-face {

font-family: 'AirstreamRegular';

src: local(''), url('Airstream.ttf') format('truetype');

}
 

.font-face h1 { font-family: ChunkFiveRegular, sans-serif; }

.font-face h2 { font-family: AirstreamRegular, cursive; }

.font-face p { font-family: Candela, sans-serif; }{/code}
Here’s the markup
{code}<h1>Lorem ipsum dolor sit amet</h1>

<h2>consectetur adipiscing elit</h2>

<p>Quisque quam odio<em>mollis</em>
Vestibulum ante ipsum primis in faucibus orci luctus
<strong>ultrices </strong>. Quisque accumsan elit id magna and came to be called
<strong>Pip</strong>.</p>{/code}
Using @font-face isn’t complicated; you’ll expend some overhead in the form of extra setup time to declare the font faces and variants you want to use, but after that you can call them in your font stacks and style them in exactly the same way as system fonts.

Share this: