the MMM blog

Load Google Fonts Asynchronously

Load Google Fonts Asynchronously


Google fonts are becoming more and more useful for web designers and developers. It is very common that multiple fonts are required for one website. However, loading multiple Google fonts may affect site speed performance. If you tested your page speed on one of the web page speed test tools, you may have seen an alert "Eliminate render-blocking JavaScript and CSS in above-the-fold content".

To avoid that, I would suggest using Web Font Loader. Examples:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

In this way, you can load multiple fonts without worry about slowing down the page load speed. Web Font Loader also supports fonts from Typekit, Fontdeck and Fonts.com.

"If opportunity doesn't knock, build a door"

Contact me!

Have questions? Feel free to use the form or send me an email with any questions.

I will be responsive to your requests and your questions.