7 Tips to Load Google Web Fonts Faster

Posted by

7 Tips to Load Google Web Fonts Faster

How can you make Google Fonts load up faster on to your website? Its not uncommon to see unstyled fonts or various default fonts loading up and then replaced by your Google web fonts leading to flash or unstyled text.

This happens when visitors visits your website at the browser loads the default web safe fonts such as Arial and many more. CSS file, then when Google font loads up its replaces the default font with Google font but for those early few seconds which ruins the web design experience for your website and annoys visitors. You need to load up the Web fonts appear faster and correct way.

Normally we use the Oswald font for headlines and Open Sans font for article text. Now see how we load it for optimal results.

Load Google Fonts First

Place up the Google import code which loads the first after html HEAD tag when even before CSS file. This ensure that font loads up before CSS. Remeber since CSS file follows up that you can style up your tags with fonts at the CSS file.

Use Link Format

Google font provides three ways to load Google web fonts such as import, link rel and javascript. Using link rel tag which will allow you to place up the code on top of html and load it fastest before CSS file.

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

@import code needs to be inserted into CSS file and you must add it on top of CSS file when you may still get flash of unstyled text (FOUT) which has a poor web experience for your visitors.

Load Fewer Fonts

Why you dont need for Google fonts to display on to each page. Its good idea to choose maximum of two fonts such as one bold type for headlines and a high readability font for the article. More fonts to choose the longer as they will take to load.

Combine Font Codes

You can now load multiple Google fonts at a single line of code. You can now need not to paste single line codes for each font on to your load. See example below where we have combined at 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 to load various styles for font. Dont you really need to add all variants and multiple to load times several times over. Load multiple variants is equivalent to load up multiple fonts. Choose up the default style each font and will load only one variant.

Example: Loading Open Sans font default option to load time impact of 15

Load Single Font

When selecting all options which will increase page load impact by 10 times.

Load Faster Fonts

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

Use Web Font Loader

When those simply want to load up their Google fonts before CSS loads to be absolutely sure that there is no unstyled text surprise, use web font loader up a javascript which will make sure loads before the rest of website and avoid any kind of flash of unstyled text. Though 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>

Leave a Reply

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