How can you load Google Fonts 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! This leads to poor user experience.
This 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.
1. Load Google Fonts First
Place the Google fonts 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.
2. Use Link Format
Google font offers 3 ways to load the Google web fonts
- @import
- Link rel
- 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.
3. 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.
4. 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'>
5. 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
While selecting all options will increase page load impact by 10 times!
6. 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!
7. 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.