7

I'm working on a site which uses the Open Sans typeface for the body text, with EOT, SVG, WOFF and TTF font files and stylesheet generated by Font Squirrel. I've included my fonts CSS first in my page header. But when I view the site in IE7, IE8 and even IE9 I get a flash of everything in Times Roman before the Open Sans kicks in. This isn't happening in the other browsers.

Can anyone suggest a way I could stop this happening? Here's the Font Squirrel CSS I'm using for that font:

 @font-face {
    font-family: 'OpenSansRegular';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
And Finally
  • 5,602
  • 14
  • 70
  • 110

2 Answers2

1

jQuery plugin to hide FOUC of @font-face can be found here: How to know if a font (@font-face) has already been loaded? Removed the code block from this thread as I have been updating it over there.

Community
  • 1
  • 1
Patrick
  • 3,490
  • 1
  • 37
  • 64
1

What you see while the custom font is being downloaded isn't defined in the above code. It's defined in your other font-family instructions throughout your CSS code.

Add other fonts after 'OpenSansRegular' value, separated by commas. From right to left:

  • on the right, the family of your font. serif, sans-serif, monospace or cursive (yay Comic Sans!). Here, OpenSansSth is ... sans-serif.
    Your browser has a default for these families, Arial, Verdana or some other font in Linux, whatever. It's the user choice when you don't choose for him. The default family is serif and the default font in Windows is 'Times New Roman'. That's why you see Times New Roman as a FOUC in IE.
  • then a websafe font that is as close as possible as your custom font. Here it'd be a sans-serif font like Verdana or Arial. Maybe sans-serif and Verdana will be the same thing but you're never sure (especially with Linux users), so add both
  • In between your custom font and the websafe one, you can add fonts that could be installed in quite a few OSes but aren't websafe like the ones installed with MS Office, Adobe Reader, OS X, Adobe Creative Suite, etc You'll find them in 10 to 90% of your visitor computers, but not 100%. Not everybody install a Creative Suite (only web professionals and other designers) and MS Office (I use LibreOffice) and there are different fonts installed in XP, Vista and 7
  • finally, the leftmost value will be the custom name you gave to your custom font. OpenSansRegular in your site

Ex:

         nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif;
         }

Compatibility tables with percentages (maybe a bit old) http://www.codestyle.org/css/font-family/
Don't use 10 values, 3 to maybe 6 will be enough ;) In 2012 @font-face may cause rendering problems depending on the browser and the OS (aliasing) but it's very well supported so you can shorten your font-families.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Thanks a lot Felipe, this is very good advice. It does help a lot, though I'm still hoping there's a clinching answer to this problem, so I won't give this the tick for now, but I'm upvoting, thanks! – And Finally Feb 01 '12 at 19:21
  • From the lack of other solutions I take it this FOUC is common behaviour for IE, so I'm giving Felipe's answer a tick. – And Finally Feb 05 '12 at 23:41