Typophile

Style linking in Internet Explorer

Tim Ahrens

I have read many sources that say Internet Explorer does not support style linking in connection with @font-face.
However, everything I tried (with IE8/WinXP) worked just like it should, with style-linked fonts, I simply cannot produce that alleged bug.

Have the problems been fixed now? Or are they version-specific? Are there any online examples/demonstration websites that use style linking and are not displayed correctly in IE?

How are you defining “style linking”?

The alleged problems relate to styles beyond the basic four that GDI understands. If you have @font-face working across a full set of weight classes would be cool to see a posted demo.

@Tim

>Internet Explorer does not support style linking in connection with @font-face.

This is incorrect, yes. font-style and font-weight are supported quite well. But in a different way than is proposed in the CSS3 spec. (In short, certain data must be congruent with the style and weight values in the @font-face declarations. Frankly, in some ways it is a more sure-footed system than what exists in the CSS3 proposal.)

As the co-creator of EOTFAST I've had a bit of leg up on this because I was able to create compressed EOT files very quickly and easily and therefore test quickly and easily.
See the documentation for EOTFAST for more details on this.
In fact, I'm proposing to deliver a paper on preparing fonts for IE 6, 7, and 8 at Atypi in Dublin later this year.

Also, here is a test page with a complete font-family declared and, in IE, you'll see the regular, italic, bold, and bold italic faces appearing just as they should.
A more complicated page, featuring a wide variety of fonts in different weights and styles is here:
Ten Great Free Fonts Cross Browser. (Informal notes on what was done to prepare the fonts are at the bottom of the page.)

Tip: There seems to be much blind ideological hatred of Microsoft and Internet Explorer. There is also a point of view that would like to see widespread use of @font-face postponed for as long as possible.
Unfortunately, in an effort to drive both agendas, it's gotten to the point where misleading statements like, "IE does not support style linking in connection with @font-face" are being made even by those who know it's inaccurate.

Rich

@sii
If you have @font-face working across a full set of weight classes would be cool to see a posted demo.

Speak of the devil. (No, not the company you work for.)
I happen to be working on a demo of this very thing. Will post when done.

Also, if memory serves me correctly, you will see numerical weights at work on the page I listed for Tim:
Ten Great Free Fonts Cross Browser

Si: Thanks for your concise answer. Looks like the style linking strategy for EOT will be the same as for normal fonts (at least with respect to those records intended for MS apps).

Richard: I don't see any information beyond what Si said but your demos are interesting nevertheless. That Kaffeesatz example with four weights is obviously with a workaround trick, does it make sense? I would definitely not do it this way.

@sii

>The alleged problems relate to styles beyond the basic four that GDI understands.

I don't understand. What is the meaning of the "basic four styles" in this context?
CSS allows only two values for font-style. Normal or italic(or oblique).
Numeric values for font-weight aside, are the four you are referring to the four produced by the combination of font-style and font-weight which has "bold" and "normal"?
So that the two combined like this will have IE apply the bold italic, or bold...

For Bold:
font-weight:bold;
font-style:normal;

For Bold Italic:
font-weight:bold;
font-style:italic;

Please explain.

@tim ahrens
The CSS for the "Ten Great Free" page was taken exactly from the original page which used "raw" TTF and OTF fonts only and so did not display in IE.
The point of the page is to show that, as long as the fonts are appropriately prepared, exactly the same CSS will work cross-browser.
Yes, the way the font families are declared is quite strange, but that's the way it was done, I just preserved it.

Looks like the style linking strategy for EOT will be the same as for normal fonts (at least with respect to those records intended for MS apps).

Not quite sure what this means without seeing the match-up between the CSS and the fonts.

The PDF documentation that accompanies EOTFAST might help some, too.

Rich

Captured from web.archive.org on 10 Apr 2010. view this capture