Improve Web Font Loader Google Fonts with OMGF Pro

Google Fonts loaded by Web Font Loader are loaded asynchronously and therefore hard to improve. After tweaking Super Stealth for CAOS, it was about time that OMGF received a premium companion to play with. Introducing: OMGF Pro.

What’s Web Font Loader?

Web Font Loader is a JavaScript library co-developed by Google and Typekit. It enables you to load Google Fonts asynchronously. I.e. it’s their attempt to optimize — the otherwise sluggish — Google Fonts.

Why does Web Font Loader need optimization?

About two weeks ago, Google introduced the latest addition of their speed measurement software — Lighthouse 6 — to PageSpeed Insights.

One of the highlights of Lighthouse 6 is Unused JS: a new reason to punish you optimization opportunity.

JavaScript Libraries and Unused JS

Web Font Loader’s webfont.js is a library, just like e.g. Google Analytics’ analytics.js is a library.

A library is a collection of code, making common tasks easier, e.g. implementing Google Fonts, adding Google Analytics, etc.

A demonstration of the impact of using JS libraries on your Google PageSpeed Insights score.
Google PageSpeed Insights now lowers your score for every library you use, e.g. jQuery or Google Analytics.

Web Font Loader doesn’t just support Google Fonts. It also supports Typekit among others.

And here’s the catch: to support all this, additional code is needed. Code that you’re not using, because you’re only using Google Fonts!

So, it’s…

  • The Wait is Over.

    Get the Newsletter you've always wanted, now!

    Sign up to receive Biweekly, Free Optimization Tips for WordPress.

    No spam. I promise.

  • Time to Dump webfont.js!

    Google loves to contradict itself, and the latest addition to PageSpeed Insights is filled with joy contradictions. Unused JS being one of them.

    Using some libraries can’t be avoided, like analytics.js. But webfont.js definitely is.

    You could — of course — try to rewrite the entire webfont.js library to just support Google Fonts.

    Don’t bother. It’s unreadable.

    Sample of code from Web Font Loader (webfont.js).
    Good luck with that.

    It’s much easier to upgrade your favorite WordPress plugin, wouldn’t you agree?

    Assuming that your favorite plugin for WordPress is OMGF. If it’s isn’t. I’m hurt — a little.

    Improve webfont.js Loading Time with OMGF Pro

    OMGF Pro offers the easiest approach to remove webfont.js from your WordPress theme and replace its Google Fonts with locally hosted versions.

    It functions as an add-on and helps OMGF to detect more fonts. OMGF Pro follows the same steps and logical approach you’re already used to, to Auto Detect your WordPress theme’s fonts.

    This calls for a Celebration!

    We’re expecting a daughter (edit: she was born July 9th!), we bought a house, Fast FW Press is boOming! And now, OMGF Pro is born.

    Too much to celebrate!

    That’s why you get 10% off on all my Premium WordPress plugins and any license using the coupon code AWESOME10 until we’ve moved into our new home, somewhere between October and December. (Edit: the move started October 13th!) That means you can get a license for as low as € 26,-!

    Improve the loading times of Web Font Loader Google Fonts with OMGF Pro and increase your PageSpeed Insights performance score. What’re you waiting for? Get OMGF Pro now!

    Daan van den Bergh

    Daan van den Bergh is a carefully seasoned web developer. His methods consist of thinly slicing your website’s beef and serve you with a platter of the best performance carpaccio on a bed of rocket — the only thing he’s more passionate about is food. Hire him at ffwp.dev.

    5 thoughts on “Improve Web Font Loader Google Fonts with OMGF Pro”

    1. Hi Daan
      OMGF pro, it says Congratulations! Your stylesheet was generated successfully and added to your theme’s header.
      There is nothing added in my themes/******/header.php ?
      Where will I find the generated style sheet ?
      What happens when I upgrade version of my theme, I don’t won’t to lose all my css work but I read you can create a child theme, I see plugin for this but how does that work, will just creating a child theme mean that nothing to my style’s will change when I upgrade. I’ve gone over what I was going so say but your plugin is awesome, no more fonts.googleapis 😁 👍

      Reply
      • Hi!

        No, nothing is added to your header.php. :) Everything is properly enqueued using WP’s built in functions. You’ll find the stylesheet in OMGF’s cache-folder, by default this is wp-content/uploads/omgf/fonts.css.

        Reply
    2. Hey, I missed the coupon 😂 Already bought.

      OMGF works really great. I can’t quantify how many time I spent in my life to fix issue related to loading of Google Fonts. The plugin fixed definitely all these issues in an incredible easy way. Many many many many thanks, Daan.

      Reply

    Leave a Comment

    This site uses Akismet to reduce spam. Learn how your comment data is processed.