Articles in this section

Style Linking

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.

Try this demo.

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;
}
Was this article helpful?

More Resources

  • About Us

    Font Licensing Doesn’t Have To Suck, So Buy With Fontspring!

  • Fresh Fonts

    This trend list showcases the bestselling new fonts of the last 90 days.

  • Contact Us

    Can't find an article to your inquiry? Send us an email!