HTML and CSS Reference
In-Depth Information
WEB-FONT PROBLEMS
Unfortunately, web fonts are not without their problems. If you really want a pro-
fessional look to your site's text, you need to consider your font choices carefully
and test them thoroughly. The following problems need considerable thought.
FLASH OF UNSTYLED TEXT (FOUT)
FOUT refers to the way some browsers behave (namely Opera, Firefox earlier than
version 4, and IE earlier than version 10) when they encounter a web font; that is,
they first render the text without the font applied. Then they download the font
file and apply it to the text. This can create a rather jarring and unsightly effect,
which you've probably witnessed at some point.
There are a couple of solutions to this problem. One solution is the webfont
loader from Google (
http://code.google.com/apis/webfonts/docs/webfont_loader.
html),
which is a JavaScript API with quite a few features available. You can include
it in your page using the following script:
<script src=”//ajax.googleapis.com/ajax/libs/webfont/1/
p
webfont.js”></script>
Yo u t h e in in e e d t fol- p fol- i in t t fol- t h e f fol- in t s i in q u e s t i fol- in b y p u t t i in g s c r i p t s l i k e t h e f fol- l -
lowing in your document's
<head>
; the scripts need to be included before your
style declarations:
<script>
{
: {
: ,
p
'SansationRegular'],
}
;
</script>
