Style linking is a somewhat confusing feature of the font-face spec. It is however very useful when working with a font family that has the four standard styles of regular, italic, bold, and bold italic. When a family is style-linked, we can refer to just one font name, “FamilyName”, instead of each individual font style like “FamilyNameBoldItalic”.
Another primary advantage to style linking is that it avoids the fake bold or fake italic that a browser could impose on a font. If a regular-weighted font has a <strong> tag applied, the browser makes the font bold using an algorithm. Instead, using style linking we can tell the browser which font to use when the regular font is made bold.
Here is the simplified CSS for a style-linked font:
/* #1 Regular Weight */
@font-face {
font-family: "FamilyName";
font-style: normal;
font-weight: normal;
src: url("[url to the regular version]");
}
/* #2 Italic Style */
@font-face {
font-family: "FamilyName";
font-style: italic;
font-weight: normal;
src: url("[url to the italic version]");
}
/* #3 Bold Weight */
@font-face {
font-family: "FamilyName";
font-style: normal;
font-weight: bold;
src: url("[url to the bold version]");
}
/* #4 Bold Italic Style */
@font-face {
font-family: "FamilyName";
font-style: italic;
font-weight: bold;
src: url("[url to the bold italic version]");
}
Notice that the font-family property is the same name for all four fonts. Also, the font-style and font-weight match what the font is.
Note: The normal weight must be at the top of the list! We haven’t found that the order after that matters.
Putting the fonts to use:
/* This will use the Regular version #1 */
h1 {
font-family: 'FamilyName', default1, default2, default3;
font-weight: normal;
font-style: normal;
}
/* This will use the Italic version #2 */
h1 {
font-family: 'FamilyName', default1, default2, default3;
font-weight: normal;
font-style: italic;
}
/* This will use the Bold version #3 */
h1 {
font-family: 'FamilyName', default1, default2, default3;
font-weight: bold;
font-style: normal;
}
/* This will use the Bold Italic version #4 */
h1 {
font-family: 'FamilyName', default1, default2, default3;
font-weight: bold;
font-style: italic;
}