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