4

I'm having an issue with Internet Explorer 8 on Windows 7 and @font-face fonts (generated by Font Squirrel). IE will load the page normally, including all the correct fonts. Then, sometimes a few seconds after the page loads, sometimes after a simple jQuery call (cross-fading divs using jQuery Cycle plugin), it will revert to a fall-back font. Occasionally, it will revert to the correct font again after another div cycles in.

This behavior could happen in any part of the page, even parts unaffected by JS. At times it also uses the fall-back font but with the spacing of the @font-face font, rendering overlapping letters.

Has anyone else noticed this behavior?

I'm running Windows on a Mac via Parallels, if this makes any difference.

UPDATE: Not sure why I didn't try this earlier, but disabling JavaScript does make the font display function as expected.

bjudson
  • 4,073
  • 3
  • 29
  • 46
  • maybe this helps: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ – Manuel Bitto Apr 22 '11 at 16:55
  • thanks. i'm using font squirrel-generated css, which that post says should work perfectly well. just to be sure, i went and regenerated the webfont kits, and i'm still getting the same problem. – bjudson Apr 22 '11 at 17:27
  • Try posting a link to the page you are having the problem with – Jarrett Widman Apr 23 '11 at 01:29
  • 1
    I just discovered this, facebook's like button caused the problem. http://stackoverflow.com/questions/5739618/facebook-js-affecting-css-font-face-in-ie – bjudson Apr 23 '11 at 02:00

1 Answers1

2

In case anyone stumbles on this: the problem was something with Facebook's Like Button code, and had nothing to do with jQuery. The solution was to move the Facebook code to the bottom of the page, just above the closing </body> tag.

Thanks to: Facebook JS affecting CSS/@font-face in IE?

Community
  • 1
  • 1
bjudson
  • 4,073
  • 3
  • 29
  • 46