HTML and CSS Reference
In-Depth Information
The JavaScript targets the fonts and the stylesheets that refer to them. It adds
classes to the document's
<html>
tag to indicate different stages of web-font loading.
Before a web font has loaded, the class
wf-loading
is included. During this stage,
you could hide the text using a descendant selector:
.wf-loading h1, .wf-loading p {
visibility: hidden;
}
When the font has finished loading and is ready to be used, the
wf-loading
class is removed, and a series of
-active
classes are included instead. Now you
can include the fonts as desired, like so:
.wf-megalopolisextraregular-n4-active h1 {
visibility: visible;
font-family: MEgalopolisExtraRegular, arial, sans-serif;
}
.wf-sansationregular-n4-active p {
visibility: visible;
font-family: SansationRegular, arial, sans-serif;
}
If the font fails to load for some reason, a class of
wf-inactive
is included
instead, and you can point to a fallback font:
.wf-inactive body {
visibility: visible;
font-family: sans-serif;
}
NOTE:
Google also has a free Fonts service at
www.google.com/
webfonts,
which is worth checking out if you are looking for
some decent quality free fonts and want an easy-to-use service.
The fonts are also hosted by Google, so you'll save some bandwidth.
