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
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.
Search WWH ::

Custom Search