During the last years I’ve intensively used web fonts. Since I published the first blog post on how you use web fonts in SharePoint 2010.
While I just downloaded the web fonts and used the CSS that was included in the font packages I recognized more and more that most of the available web fonts are wrong defined inside the font packages. There are a couple of problems with the definitions of the @fontface that you can avoid creating a cleaner style sheet.

Problem 1 – Font weight

Let’s say you like to use the “Roboto” font in your web project and download the web font kit from font squirrel. This font looks nice and comes with a lot of different font weight ranging from light to black. Thin to heavy bold.
Our design requires a bold, a normal and the light version of this font. The combined CSS file, then looks like this.

@font-face {
    font-family: 'robotobold';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoregular';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

If we now take a look at the font-family definitions we see that the regular version is named ‘robotoregular’, the light version is named ‘robotolight’ and the bold version is named ‘robotobold’.

This is the first mistake in the most font packages. If you like to use the same font but with a different font width you need to know the font instead of assigning a proper font-weight. To change this behavior the first thing that needs to be done is to use the same font-family name. In this case all that needs to be done is to change the font-family from ‘robotoregular’, ‘robotolight’ and ‘robotobold’ to be just ‘Roboto’.
The second mistake is that all the font-weight of the @font-face definitions are set to ‘normal’. To apply a proper font-weight to those definitions need to be changed. The following definition shows the defined font weights according to the font.

• 100 – Thin (Hairline)
• 200 – Extra Light (Ultra Light)
• 300 – Light
• 400 – Normal
• 500 – Medium
• 600 – Semi Bold (Demi Bold)
• 700 – Bold
• 800 – Extra Bold (Ultra Bold)
• 900 – Black (Heavy)

The font-weight of the previous ‘robotobold’ needs to be set to 700 or simply bold, the font-weight of the ‘robotolight’ needs to be set to 300 and ‘robotoregular’ needs to be set to 400 or simply leave it as normal. The corrected definition looks like this.

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Problem 2 – Font style

The same problems apply to the font style settings too. Let’s use the same Roboto font with a font-weight ‘bold’ and the font-style in ‘italic’. This is how the default definition in the font package looks like.

@font-face {
    font-family: 'robotobold_italic';
    src: url('Roboto-BoldItalic-webfont.eot');
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-BoldItalic-webfont.woff') format('woff'),
         url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('Roboto-BoldItalic-webfont.svg#robotobold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

This is how the correct font-face definition should look like.

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic-webfont.eot');
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-BoldItalic-webfont.woff') format('woff'),
         url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('Roboto-BoldItalic-webfont.svg#robotobold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

Why fixing @font-face and font packages

The fixed font definition makes life easier when you add those fonts to your style sheet. Instead of using different font definitions you simply have to use
* font-face: ‘Roboto’.
If the font style should be italic you can simply use
* font-style: italic
The browser automatically selects the correct font, files for you. This will make your CSS cleaner and easier to read.
Another benefit is that you don’t have to apply different fonts to default style definitions such as ‘<strong>’ or ‘<em>’. Finally in case you use the same font on the google font directory you will get the correct font-weight and style definitions.