New to Typophile? Accounts are free, and easy to set up.
Hi, I've been searching everywhere for the last week to find a definitive answer to the question: Is it actually possible to do style linking with your @font-face declarations and have it use the proper font faces in IE7-8 (when just using 4 basic variations - normal/bold/italic/bold-italic)?
In our tests, with a single self-hosted font and just 4 variations (normal, bold, italic, bold-italic), all browsers understand the @font-face style linking properly and apply the right face for bold/italic/bold-italic type. But our good friend IE recognizes the normal face properly, then just applies a 'faux' bold & italic to all instances of bold/italic/bold-italic type! It looks terrible.
We've tried most every variation of popular syntax, including the original Paul Irish 'Bulletproof' method, updates to that, the 'Smiley' syntax, the recommended syntax from Fonts.com (where we're getting the fonts from), and even what's listed here: http://css-tricks.com/snippets/css/using-font-face/. They all seem to have the same issues with IE7-8 : bold is 'super-bold' and italic is 'extra-italic'. It just looks bad.
Here's our test page: http://joomla25.lanetest.com/index.php/client-test-article
So I've found a few discussions about style linking that seem to indicate it is just NOT possible in IE7-8 at all. That seems to be what I'm finding.
HOWEVER, there are also a couple discussions that state that IE6-8 can't handle style linking when MORE THAN 4 STYLE/WEIGHT VARIANTS are used. We're not doing more than 4!
See here (toward bottom of page): http://help.typekit.com/customer/portal/articles/6855-using-multiple-wei...
And here: http://blog.typekit.com/2011/06/27/new-from-typekit-variation-specific-f...
But the most confusing thing is that we have definitely been doing this with 2 different hosted solutions: FontsLive.com and Typekit. We add the 4 basic variations of a font to our 'project', then give them all the same font-name, and lastly just add that font-name to our master font-family stack on our body tag. Every instance of styling that asks for bold/italic/bold-italic, whether with font-weight/font-style rules, or just applying strong/em, just works. EVEN IN IE7-8!!! So it sure seems like this is possible! Unfortunately, FontsLive.com was bought out by Fonts.com and they use a different method. This is why we're trying their self-hosting option - to see if we can get that easy solution back.
- Anyone have any insight I'm missing here???
- Any other resources or places I should look??