Refresh browser to see how the webfonts below are loaded. Best viewed with a fresh cache. Note: effects are more prominent on pages more resource-demanding than this small demo.
wf-loadingis added to the
htmlelement by a small piece of JS
wf-loadingclass once fonts have loaded, thus returning the opacity of example text 2 to '1'. CSS transitions are used to fade this opacity change for capable browsers.
wf-loadingclass when the Google webfont loader does this for us? In some cases I found that this kicked in too late and the fallback font was displayed before the CSS attached to the class could be applied. If this isn't an issue on your build, you can leave the loader to handle it all.
wf-loadingclass is never applied, the text isn't hidden, and the fallback font is displayed.
www.css-takeaway.com / @iamandyjones