Menu

Defining a CSS font family

In this article we're going to be digging into the composition of the CSS Font Family and how browsers interpret weight and style formatting.

normal text font-style:italic
font-weight:bold font-weight:bold;
font-style:italic;

A webfont is always part of a CSS font family, while a CSS font family can consist of a number of webfonts. For each CSS font family, you should decide which webfont should be used when the browser applies the formatting “italic” or “bold” to the text.

Since those two formattings can be used in combination, a CSS font family will have up to four members. You decide which webfont will work as the “regular” member of the family, and which webfonts will work as the “italic”, “bold” and “bold italic” members. Practically, a webfont definition looks like the following:


@font-face {
font-family: '<CSS font family name>
src: <pointers to webfont files in various formats>
font-style: normal | italic;
font-weight: normal | bold;
}

You can use any string as the <CSS font family name> but it must be identical for all four webfonts that make a CSS font family. The font-style property uses one of two values: normal or italic. The font-weight property uses one of two values: normal or bold. Two properties with two values each results in four combination. More values are allowed by the spec but in practice they are not recommended.

Remember: you can use any four webfonts to make a CSS font family. They do not need to form a typographic family: you can mix fonts from different families. But ideally, you should define all four members within one family. If you don’t define all four members, and your HTML or CSS code is such that the browser “decides” to apply bold formatting to your text, your visitors will see “fake” (smeared) bold letters.

Also remember: the rules for forming the src attribute value are quite complex, and there are several “best practices” for the recommended syntax. It is safe to just use the syntax provided within your MyFonts webfont kit.

Imagine John is running a blog and wants to use several styles of the Museo Sans and Museo Slab font families. He wants to use Museo Slab 100 for the largest headings, Museo Sans 300 for regular text, Museo Slab 300 for for subheadings and for emphasis in the regular text, and he also wants to use Museo Sans 900 for strong emphasis in the regular text.

This example shows you how to achieve this in a simple way:


@font-face {
font-family: 'Johns Blog Main Font';
src: <pointers to Museo Sans 300 files in various formats>
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'Johns Blog Main Font';
src: <pointers to Museo Slab 300 files in various formats>
font-style: italic;
font-weight: normal;
}
@font-face {
font-family: 'Johns Blog Main Font';
src: <pointers to Museo Sans 900 files in various formats>
font-style: normal;
font-weight: bold;
}
@font-face {
font-family: 'Johns Blog Main Font';
src: <pointers to Museo Sans 900 files in various formats>
font-style: italic;
font-weight: bold;
}
@font-face {
font-family: 'Johns Blog Heading Font';
src: <pointers to Museo Slab 100 files in various formats>
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'Johns Blog Heading Font';
src: <pointers to Museo Slab 100 files in various formats>
font-style: italic;
font-weight: normal;
}
@font-face {
font-family: 'Johns Blog Heading Font';
src: <pointers to Museo Slab 100 files in various formats>
font-style: normal;
font-weight: bold;
}
@font-face {
font-family: 'Johns Blog Heading Font';
src: <pointers to Museo Slab 100 files in various formats>
font-style: italic;
font-weight: bold;
}

We have defined two CSS font families in this example:

“Johns Blog Main Font” with four entries that define the fonts to be used in all four combinations of the “italic” and “bold” formatting

“Johns Blog Heading Font” with four entries that define the fonts to be used in all four combinations of the “italic” and “bold” formatting

But we used only four actual fonts: Museo Sans 300, Museo Slab 300, Museo Sans 900 and Museo Slab 100.

Back...