Mark Greenwood Team : Web Development
12Mar2014

@font-face

Mark Greenwood Team : Web Development

Custom fonts can present some challenges. The most common issue is that the different font styles and weights come in separate font files. 1 file per font weight / style combination. There are 2 ways to utilise the differing font displays.

The wrong way

A common technique, strangely shared by many font services like FontSquirrel, does things the wrong way! This solution is to create a additional @font-face declarations for each weight and style. You then apply the specific font-family definition to your elements depending on whether they are to be bold or italic (or not).

The biggest problem with this is that browsers will often brute force a faux weight or style when the css calls for anything but normal font weight and style. If you specify a "bold" font declaration and actually set the element to also be "bold", you end up with bolder than bold rendering. Not a great look really, especially given that some browsers will and some won't do it. The solution then is to always specify weight and style : "normal"

Example:

@font-face {
        font-family: 'CustomFontRegular';
        src: url('Custom-R-webfont.eot');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: 'CustomFontItalic';
        src: url('Custom-I-webfont.eot');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: 'CustomFontBold';
        src: url('Custom-B-webfont.eot');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: 'CustomFontBoldItalic';
        src: url('Custom-BI-webfont.eot');
        font-weight: normal;
        font-style: normal;
}
p {
        font-family: CustomFontRegular, arial, sans-serif;
        font-style: normal;
        font-weight: normal;
}
p em {
        font-family: CustomFontItalic, arial, sans-serif;
        font-style: normal;
        font-weight: normal;
}
p strong {
        font-family: CustomFontBold, arial, sans-serif;
        font-style: normal;
        font-weight: normal;
}
p strong em, p em strong {
        font-family: CustomFontBoldItalic, arial, sans-serif;
        font-style: normal;
        font-weight: normal;
}

 

The right way

The correct way to declare your custom fonts is to include css properties that also describe the fonts weight and style. You simply make multiple declarations with @font-font for the same font family. Each declaration includes the font source references and importantly the styles defining when the specific font variation should be used.

Example:

@font-face {
        font-family: 'CustomFont';
        src: url('Custom-R-webfont.eot');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: 'CustomFont';
        src: url('Custom-I-webfont.eot');
        font-weight: normal;
        font-style: italic;
}
@font-face {
        font-family: 'CustomFont';
        src: url('Custom-B-webfont.eot');
        font-weight: bold;
        font-style: normal;
}
@font-face {
        font-family: 'CustomFont';
        src: url('Custom-BI-webfont.eot');
        font-weight: bold;
        font-style: italic;
}
p {
        font-family: CustomFont, arial, sans-serif;
}