Suddenly developed a weird problem in IE7 and IE8 using typekit fonts where both browsers displayed all fonts as rather ugly italics. Ie9+ and Chrome Safari etc all fine. According to Typekit its an IE bug triggered when "multiple weights and styles of a single font family are used in the same kit" and they give more information here:

http://blog.typekit.com/2011/06/27/new-from-typekit-variation-specific-f...

Weirdly, it happens to me on one some sites I've done and not others although all are using Drupal 7, font-your-face and the same typekit fonts.

Workaround is to explicitly set and override the unique font-family name in your theme css so for example I've done:

body
 {
   font-family: myriad-pro-n4, myriad-pro, sans-serif !important;
   font-weight: 100; 
   font-style: normal;
}
/* force setting to be inherited by child divs and paras */
div, p
{
   font-family: myriad-pro-n4, myriad-pro, sans-serif !important;
   font-weight: 100; 
   font-style: normal;
}

h1,h2,h3,h4
 {
   font-family: prenton-n4, prenton, sans-serif !important;
   font-weight: 100;
   font-style: normal;
 }

Note the unique 'myriad-pro-n4' for which you'll need to substitute your own unique name. Would it make sense to update the module code to do the same thing since I believe that would work round the issue?

Comments

sreynen’s picture

sreynen CreditAttribution: sreynen commented
Status: Active » Postponed (maintainer needs more info)

I'm not clear on what you're suggesting we change. Can you clarify by showing the current output and what you think should be output instead? The module uses font-family names passed in directly from Typekit's API, which I believe are already the more specific family names you're talking about.

gittosj’s picture

gittosj CreditAttribution: gittosj commented

OK - I'll try but forgive my ignorance if my suggestion is wrong or wrong-headed!

I believe (that in my case) the CSS file presented to IE7 / IE8 is:

/sites/default/files/fontyourface/font.css and when I look at that in IE7 or IE8 then it looks like this:

BODY { FONT-FAMILY: "myriad-pro"; FONT-WEIGHT: 400; FONT-STYLE: normal }
P { FONT-FAMILY: "myriad-pro"; FONT-WEIGHT: 400; FONT-STYLE: normal }
DIV {	FONT-FAMILY: "myriad-pro"; FONT-WEIGHT: 400; FONT-STYLE: normal }
H1 { FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal }
H2 {FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal}
H3 { FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal }
H4 {FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal }
H5 {FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal }
H6 {	FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal }
H1 { FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal }
H2 {	FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal }
H3 { FONT-FAMILY: "prenton"; FONT-WEIGHT: 400; FONT-STYLE: normal }

I guess those declarations are generated by the settings I've chosen in admin/appearance/fontyourface. Its not clear to me why the bug in IE7 / 8 is being triggered apart from the clue from typekit's suggestion of "multiple weights and styles of a single font family are used in the same kit" which seems weird since there is only one used above.

So checking with 'developer tools' IE7 / IE8 are applying the 'font-family: myriad-pro' attribute to each div. This seems to trigger the bug in IE7 / IE8 and so the text is italicised and uneven.

If I then overide it in my theme stylesheet with:

DIV { font-family: myriad-pro-n4, myriad-pro, sans-serif !important; }

then IE7 /8 now apply myriad-pro-n4 to the div and it displays fine.

Conclusion: IE7 / 8 seem to need the 'unique' font-family name to function and render correctly. I've checked this on two different windows machines with the same results. It seems possible that typekit have introduced a bug by introducing their workaround to Ie7 / 8 rendering. Plainly these rendering problems are not a bug in this module but it seems like we could work around it by using a font-stack like mine in fonts.css?

Apologies again if this is poorly described or incorrect..

BarisW’s picture

BarisW CreditAttribution: BarisW commented

Do you happen to use the Omega theme? If so, see #1325434: Make font.css load last with Omega subtheme

gittosj’s picture

gittosj CreditAttribution: gittosj commented

No - sorry - should have said so thanks for the prompt. I'm using Zen 7.x5.1. I've trashed the subtheme I was using and started afresh with a new install and new subtheme and the problem persists. I can switch to clean versions of zen and bartik etc and still all text is oddly italicised in IE7 and IE8 so I 'think' this is a reproducible bug! Could be wrong & apologies if so.

webavant’s picture

webavant CreditAttribution: webavant commented

Although I have not tested your issue specifically, I believe that this post on Typekit.com addresses this issue specifically. Make sure your IE is not being forced into compatibility mode by an HTTP header or meta tag, or that you haven't enabled compatibility mode in your browser settings.

dgtlmoon’s picture

dgtlmoon CreditAttribution: dgtlmoon commented

Not all WOFF/EOT's are create equal, I had similar issue, using the WOFF/EOT (paid) from Linotype fixed my issue

dgtlmoon’s picture

dgtlmoon CreditAttribution: dgtlmoon commented
Issue summary: View changes

forgot to add the div, p css

Neslee Canil Pinto’s picture

Neslee Canil Pinto
he/him
Primary language English
CreditAttribution: Neslee Canil Pinto at Specbee commented
Issue summary: View changes
Status: Postponed (maintainer needs more info) » Closed (outdated)