Font Embedding, Style Linking, IE Woes

HTML & CSS
1

Hi,
Does anyone have experience with getting self-hosted, embedded fonts to work when using style linking AND in all browsers???

We’ve mostly used hosted font serving, with FontsLive.com and TypeKit. Both have worked wonderfully, allowing for style linking internally so that all we have to do is add the new web font name to our main ‘font-family’ list (including fallback fonts) and the proper face is picked up automatically whenever something is styled as bold, italic or bold-italic. It’s always worked perfectly in all browsers INCLUDING the notorious IE 7-8!!

UNFORTUNATELY, FontsLive.com was bought out by Fonts.com (Monotype) and we are now forced to use them for the fonts a couple of our clients use on their sites. And Fonts.com DOES NOT allow style linking for their hosted solutions, which would completely mess up how we’ve done our styles (not to mention, defeating proper fallback font functionality). So we are trying to use their ‘Self-Hosted’ option so we can do this ourselves.

When modifying their @font-face rules, or using a couple of the common ‘standards’ (bulletproof, ‘Mo bulletproof, Fontspring, etc.), everything works great in all browsers EXCEPT my favorites - IE7-8 (haven’t tested IE9 yet)! In IE7-8, it appears that the normal font loads OK, then any italic, bold-italic and possibly even bold is applied using the browsers’ ‘faux’ styles. It ‘appears’ that it is making the proper italic font extra-italic, or the bold ‘extra-bold’. I can’t tell if it’s applying the faux bold/italic to the standard face or to the proper italic & bold faces.

Below is one of the code samples I’ve tried.

  • Anyone get this to work in IE??? CAN it work??

I see conflicting reports on whether IE can work with style linking or not. Some things I’ve read says it just doesn’t allow for more than 4 weights/styles. But the biggest thing is that FontsLive.com and Typekit SOMEHOW HAVE IT WORKING!!

Thanks for any help!

SAMPLE FONT LOADING:

@import url("http://fast.fonts.com/t/1.css?apiType=css&projectid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
@font-face{
font-family:"AvantGardeWeb";
src:url("/Fonts/2a334c60-3e0d-4f43-b0e9-5284ea33961a.eot"); /* IE9 Compat Modes */ 
src:url("/Fonts/2a334c60-3e0d-4f43-b0e9-5284ea33961a.eot?iefix") format("embedded-opentype"); /* IE 6-8 */
src:url("/Fonts/c68f0543-0caf-4988-b234-355520476b8c.woff") format("woff"),url("/Fonts/2d4f1d98-ddb3-4acc-ae78-c8b1863f780e.ttf") format("truetype"),url("/Fonts/80f98a03-905d-49e6-8614-cec7c32ca4f2.svg#80f98a03-905d-49e6-8614-cec7c32ca4f2") format("svg");
font-style: normal;
font-weight: normal;
}
@font-face{
font-family:"AvantGardeWeb";
src:url("/Fonts/d6c308a1-6908-40bc-b732-0fec02d083ac.eot"); /* IE9 Compat Modes */ 
src:url("/Fonts/d6c308a1-6908-40bc-b732-0fec02d083ac.eot?iefix") format("embedded-opentype"); /* IE 6-8 */
src:url("/Fonts/7571e8e6-97a2-48aa-97c1-b8aeeefc5409.woff") format("woff"),url("/Fonts/8f1e17ad-3b38-4d51-83f5-4e5469174a77.ttf") format("truetype"),url("/Fonts/1ee7d1fd-0f7c-4d70-b970-f4dc602eab62.svg#1ee7d1fd-0f7c-4d70-b970-f4dc602eab62") format("svg");
font-style: italic;
font-weight: normal;
}
@font-face{
font-family:"AvantGardeWeb";
src:url("/Fonts/5daf8f81-4f5b-4b44-8fd3-91c56d20e799.eot"); /* IE9 Compat Modes */ 
src:url("/Fonts/5daf8f81-4f5b-4b44-8fd3-91c56d20e799.eot?iefix") format("embedded-opentype"); /* IE 6-8 */
src:url("/Fonts/43b723ac-a6f2-4d5d-9d72-c50aea85ecee.woff") format("woff"),url("/Fonts/9093e944-c2da-4954-953f-ca2eb3a227dd.ttf") format("truetype"),url("/Fonts/e3929a31-b148-4180-91be-4b490bdac87d.svg#e3929a31-b148-4180-91be-4b490bdac87d") format("svg");
font-style: normal;
font-weight: bold;
}
@font-face{
font-family:"AvantGardeWeb";
src:url("/Fonts/e77dac3e-51a1-44bd-8a8c-042137ec2a31.eot"); /* IE9 Compat Modes */ 
src:url("/Fonts/e77dac3e-51a1-44bd-8a8c-042137ec2a31.eot?iefix") format("embedded-opentype"); /* IE 6-8 */
src:url("/Fonts/8513e971-f071-42cc-9f20-914ffc672da4.woff") format("woff"),url("/Fonts/9cea694b-1cf4-4bed-91e2-34b5e3f3bbfe.ttf") format("truetype"),url("/Fonts/14ef78e2-840f-42a0-ade1-5c2aa453ac56.svg#14ef78e2-840f-42a0-ade1-5c2aa453ac56") format("svg");
font-style: italic;
font-weight: bold;
}
2

I’m not sure how this particular font works, but really, each of those entries should have a different font name, such as

font-family:"AvantGardeWeb";

font-family:"AvantGardeWeb-[COLOR="#FF0000"]bold[/COLOR]";

font-family:"AvantGardeWeb-[COLOR="#FF0000"]italic[/COLOR]";

Those are just made up names, but the point is, you are loading a regular font, an italic font and a bold font, so they each should have a different name so that they can be identified in your style sheet. Then, at the bottom, the last two lines should always read

font-style: normal;
font-weight: normal;

because you don’t want the browser to add anything: the font should already be normal, bold or italic (depending on the font).

FontSquirrel has great code ready to go for this sort of thing, so if you can find a font there that suits, I’d recommend using that.

3

Thanks for the info. I’m definitely aware of loading fonts separately and NOT doing style linking.

But there are two major disadvantages to that:

  • I would have to locate and declare separate font-families for EVERY instance of type that would be bold, italic or bold-italic sitewide. On this particular site, that would be QUITE daunting! Also, any decision to change a font/style would take much more work than just changing one main font-family declaration.

  • The bigger issue is that there is no way to have proper fallback font support with this method (as all italic/bold/bold-italic type would be ‘normal’). I know it’s ‘usually’ not necessary, but is still nice to make sure the site doesn’t completely fall apart if the web fonts aren’t loaded for some reason.

I wouldn’t be so adamant about figuring this out if I didn’t already have good examples of this working so well (i.e., FontsLive.com and Typekit integrations we’re using). I just can’t seem to decipher what magic they are using to get this to work in all browsers.

Thanks!

4

I just don’t see the point of linking to the same font three times. If you cite “AvantGardeWeb” in your style sheet, how is the browser supposed to know which one you mean? I’m not sure how browsers will handle that conflict, but I’d guess they might just go to the last one.

For browsers that don’t support @font-face, you could probably do this in the style sheet:

font: bold default, fonts, listed, here, sans-serif;
font-family: AvantGardeWeb-bold;

(Need someone more knowedgeable to confim or deny that, though.)

5

Thanks for the input.

  • Anyone else with experience using Style Linking with embedded fonts??

Here’s an article that describes the basic concept of style linking:
http://www.fontspring.com/support/installing_webfonts/style-linking

And here’s something on Typekit’s site that appears to declare that IE6-8 CAN in fact handle up to 4 weight/style variations with a single font name (read toward the bottom of the page - ‘Trying to use more than four weights and styles…’):
http://help.typekit.com/customer/portal/articles/6855-using-multiple-weights-and-styles

THANKS!

6

In case anyone is trying to find the answer to this, I did FINALLY have success!

It IS in fact possible to do style linking in older versions of IE, as long as you remain in the normal 4 weight/style variations AND the font files have the proper internal metadata naming.

The bottom line that I found out in my case was that the font files did not have the proper internal naming and style declarations (even though they came from Fonts.com/Monotype). And IE mistakenly uses this information over the CSS declarations in determining what should be regular/italic/bold/bold-italic.

If anyone wants more details, you can read through my thread here: http://typophile.com/node/95303#comment-519101

Good luck!

7

Wow, you certainly jumped through a lot of hoops.

Thanks for posting the solution and lets hope it helps others for all your effort.:slight_smile:

8

ralph.m, It is actually correct to have the font declarations with the same name if they are different variations, bold and italic for example. This is so when you use font-weight/font-style it gets the correct font variation automatically without you having to specific it.

This is how normal fonts work, btw. The name is labeled as “font-family” for a reason. You are declaring/calling a family of fonts, not just a single font.

9

Yeah, I’ve learned that now. :slight_smile: