0 Items in Cart

Cart Total: $0.00 USD

View Cart and Checkout

Get Font Help

The ins and outs of licensing and using fonts!

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;
}

 

Updated on October 4, 2017