Question

When we define @font-face styles, we can define whether the referenced files are for the bold, italic, or bold italic versions of a font, as discussed in this SO question:

How to add multiple font files for the same font?

Example:

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

However, Font Squirrel doesn’t generate @font-face kits this way. They do something like this instead:

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontinSansBold';
    src: local('☺'), url('fontin_sans_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Which means in our CSS files we have to do things like this:

h2 {
    font-family: 'FontinSansBold', Verdana, sans-serif;
    font-weight: normal;
}

Why doesn’t Font Squirrel use the font-weight and font-style declarations to distinguish the bold and italic variants? Why use a separate font family? Do they know something about (lack of) support for this feature in some browser?

Answer 1

By default, Font-Squirrel does this in order to increase support with user-agents that do not follow specification (those that ignore font-weight and font-style).

If you do not care about those outdated user-agents, you may enable the “Style Linking” option which is available in the expert section of the @font-face kit generator. Note that IE8 and below ignores numbered font-weight values and only support normal and bold (and corresponding 400, 700 weight values).