15

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?

Community
  • 1
  • 1
bjudson
  • 4,073
  • 3
  • 29
  • 46

4 Answers4

17

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).

Community
  • 1
  • 1
Andrew Moore
  • 93,497
  • 30
  • 163
  • 175
  • Thanks, Andrew. Good to know that option is in their settings. It's a question that will impact how I write CSS. – bjudson Sep 25 '10 at 21:55
  • 6
    To clarify, I believe it's not exactly because IE8 (and below?) doesn't support font-weight/font-style, but the fact that IE8 doesn't support multiple font faces for a font family. So in your example, IE8 would only take the first FontinSans declaration, and use faux-bolding instead of the proper bold custom font. It usually ends up looking horrendous...so that's why this different font-family name workaround exists. Also a note that if you do h2 {font-family: 'FontinSansBold'; font-weight:bold;}, it'll ALSO apply faux bold, which again, looks like crap. – Henry C Oct 12 '11 at 23:38
9

It does involve poking around inside the font to determine when a font is bold or italic. And certain bits must be set inside the font in order for IE to pick up the style linking. Most bold / italic fonts have these bits set, but not all. We are working on a way to make this more automatic.

Font Squirrel
  • 1,571
  • 11
  • 13
3

It seems Internet Explorer 8 may be one of those "older" user agents that doesn't support font-weight and font-style

I am trying to make bold/italic/bolditalic automatic using the @font-face and font-family.

My attempts so far have yielded nothing. Here is a page demonstrating the problem.

http://clearimageonline.com/apps/playground/fonts/test_IE.html

Anyone here encountered this and have a solution that works with IE8?

I have searched and fiddled most of this week for an answer to this. It appears that IE8 wont let me do this.

Here is a proposed workaround (very ugly workaround)....

http://clearimageonline.com/apps/playground/fonts/proposed_IE.html

These test pages are designed for Internet Explorer ONLY. This test is limited to IE. Cross Browser functionality will obviouosly be a part of a final solution.

Terry Riegel
  • 99
  • 1
  • 2
0

The problem using the default FontSquirrel's approach is that if the fallback font loads, all weights will be lost because they are all set to normal. I think the style linking is the best approach.

If you are worried about IE8 users you can use a conditional css.

laraborg
  • 1
  • 2