7 Tips to Load Google Web Fonts Faster

By 19-10-2013   BloggingTutorials
Tweet Share Email Share  

How can you make Google Fonts load faster on your site? It is not uncommon to see unstyled fonts or different default fonts loading and then being replaced by your Google web fonts leading to a flash of unstyled text!

font load timeThis happens because when the visitor visits your website, the browser loads the default web safe fonts like Arial etc. suggested in the CSS file, then when the Google font loads, it replaces the default font with the Google font … but for those early few seconds, it ruins the web design experience for your website, and annoys visitors. So you need to load Web fonts appear faster and the correct way.

We use the Oswald font for headlines and Open Sans font for article text. See how we load it for optimal results.

Advertisements

Load Google Fonts First

Place the Google import code such that it loads the first after the html HEAD tag, even before the CSS file. This will ensure that the font loads before the CSS. Remember that since the CSS file follows, you can style your tags with the fonts in the CSS file.

Use Link Format

Google font offers 3 ways to load the Google web fonts – @import, link rel and javascript. Using the link rel tag will allow you to place the code on top of the html and load it fastest before the CSS file.

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

@import code needs to be inserted into the CSS file, and although you may add it at top of the CSS file, you may still get a  flash of unstyled text (FOUT) – which is a poor web experience for your visitors.

Load Fewer Fonts

So why do you need 4 Google fonts to display on each page. Its a good idea to choose a maximum of two fonts – one bold type for headlines and a high readability font for the article. The more fonts you choose, the longer they will take to load.

Combine Font Codes

You can load multiple Google fonts with a single line of code. You need not paste single line codes for each font you load. See the example below where we have combined the Open Sans and Oswald font.

<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>

Load Default Variants

Each font option allows you to load various styles of font. Do you really need to add all the variants and multiple the load times several times over. Loading multiple variants is equivalent to loading multiple fonts. Choose the default style of each font and it will load only one variant.

For example –  loading Open Sans font default option give load time impact of 15

Load Single Font

While selecting all options will increase page load impact by 10 times!

Load all Fonts

Load Faster Fonts

Google Font pages for each font make it very clear how long the font will take to load. The load meter beside the font shows how fast each font will load. If you keep adding more fonts, the longer time it will take to load. Some fonts are heavy and can take almost double the load time. So choose wisely and opt for faster loading fonts. For example Open Sans has page impact of 15 while Droid Sans will be more at 25!

Use Web Font Loader

For those who simply want to load their Google fonts before the CSS loads and need to be absolutely sure there is no unstyled text surprise, use the web font loader – a  javascript which will make sure it loads before the rest of the site and avoid any flash of unstyled text. Though an asynchronous script is available, it is better to use the synchronous script to ensure your font loads first.

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

So try out these Google font tricks and change your website design for a greater impact.

19 comments on “7 Tips to Load Google Web Fonts Faster

  1. raghavendra says:

    nice post, i was looking for this.

  2. Hyptia says:

    These are the things which are help for you to complete your smart work in web world.

  3. Guestblo says:

    This was really a good read as got to know many important details. I guess combining multiple codes and loading faster fonts are what matter most in terms of making Google web fonts load faster.

  4. Ron says:

    I have honestly never thought of this but will go through and make sure they are updated so that I don’t have any more issues! Thanks for the tips!

  5. Danny says:

    I never thought fonts could load faster, so this is something totally new for me. Thx a lot

  6. Arbaz Khan says:

    I never thought that even fonts could affect the load time of a blog. Thanks for updating us on this and giving a solution to load all the Google web fonts faster.

  7. Angela Amy says:

    Speed counts, and nobody knows that better than Google. The latest tweak to provide better performance comes in the form of adopting a new compression type that promises to yield files about 15% smaller than using Gzip to compress fonts.

    • Kostas says:

      I don’t know about Google always knowing best – but their opinion is generally the only one that matters. I usually always stick to default fonts anyhow.

  8. Muhammad says:

    I didn’t have this much info about google web fonts and learnt a lot from this post which I owe to you. Thanks buddy

  9. sameeer says:

    nice tips but how i can do this on blogger?

  10. Michael Bian says:

    This post is so great!. Thanks for sharing this.

  11. Very nice post. Really its used well.

  12. marcus says:

    very good ideas and tips on this article Will google put in updates on this software?

  13. Jane says:

    Great post I enjoy this post reading. There are lost of new new thing you describe in this post. thank you for this awesome post with a great things to learn.

  14. spookseo says:

    It really works! Thank you for sharing this. I am sure that you have helped a lot of people with this write-up. Fonts are really necessary to keep the interest of the public. Make sure that you also some of the basic looks of the font to make sure that it fits your website.

  15. Great post. Application of the right fonts is necessary in order to keep the content of the website or blog readable. That you stick to the basic looks of the font to ensure its readability, for the ease of the visitors.

  16. Masked says:

    “For example Open Sans has page impact of 15 while Droid Sans will be more at 25!”

    Anyone know what units these numbers represent?

  17. Harry Anza says:

    I’m very happy to read it through . Many lessons I got from your article. Nice for sharing. Allow to share this article. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php