Google Webfont Loader

Now in Plugin format.

The issue with web fonts is that they can sometimes block the page render, especially on mobile devices. This issue stems from the rendering path. As a website is trying to download resources it may get hung up trying to download a bunch of webfont libraries.

Often you will come across terms such as Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) . These terms refer to the scenarios that occur when web fonts are loaded from a hosted library.

The first happens when a website waits for the webfont to load, this pauses the loading of the page till the font downloads completely. This is typically considered the worst of the two scenarios. The FOUT is preferable because a default style will load while the webfont is downloaded and then the webfont will style the page causing a brief disruption to the user experience as the styles change. Typically, unstyled text is better than no text.

Enter the WebFont Loader. Google has created a javascript library that will add styling to the <code>html</code> block that will provide whichever default style you wish until the webfont is properly loaded, then seemlessly switch the styles to webfont, thus allowing the page to load properly before styling. This will have a great effect on your page load.

The plugin is in its infancy but basically adds the link to the javascript library, add the script for the Webfont Loader and then allows the user to specify in the dashboard which fonts they would like to load from Google.

I plan to add functionality for other webfont libraries such as Fonts.com etc. For now, Google will have to do.

I am launching Version 1.0 this month, check back in for more details in the upcoming weeks!