HTML and CSS Reference
In-Depth Information
If you are experiencing strange blips in font performance or rendering quality,
it could be due to one of the following:
IE9 and later support the WOFF format, but they also support EOT. If you
are using syntax like that in the preceding code, IE9 and later will down-
load the EOT file and use it (browsers go through the list and use the first
font they recognize). You can find a more detailed reference for fixing IE9
font problems at
www.fontspring.com/blog/fixing-ie9-font-face-problems.
If your web fonts are failing in Firefox or IE and you are serving your fonts
from a different domain, it might be because they have a stricter same-
origin policy than most. A workaround is to serve the fonts using the
Access-Control-Allow-Origin
HTTP header defined in CORS (see
http://
resource-sharing
for more details).
If you are using WOFF and your fonts are being served from IIS, you'll need
to add a MIME type: WOFF doesn't have a MIME type, but
font/x-woff
will work.
Never declare
@font-face
rules for fonts you don't end up using: IE 6-8
will download them all anyway.
Opera 11.5 and earlier on the Mac, unfortunately, download the EOT font as
well as the WOFF font that it actually uses, wasting some bandwidth. Let's
hope this will be fixed soon.
COMMERCIAL FONT SERVICES
Commercial font services tend to give you better quality fonts on average, although
there are some great free fonts available. You have two options for commercial
font services:
Buying fonts outright
Using a hosted font service
