Google Fonts open up for developers to optimize their blogs with the best style of text. When the visitor visits your website, the browser loads the default web safe fonts like Arial etc . When the developer adds the google fonts the scripts reads font files from google font to make sure it displays the default coded font style. When the Google font loads, it replaces the default font with the Google font for those early few seconds, of loading content 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.
Place the Google import code first below head such that it loads the first after the HTML HEAD tag, even before the CSS file. That optimizes the speed since it will load before the default fonts appear first. 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.
1. Use Link Format Fonts
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. The link format makes it easy to retrieve fonts CSS styles from google font server so as to display in your website body. The google font link looks like the one attached below.<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
The import code needs to be inserted into the CSS file, and although you may add it at top of the CSS file, you may add flash , according to SEO never add flash since search engines cant render flash resources which is a poor web experience for your visitors.
2. Load Fewer Fonts
The more you add many fonts in your template , the mote the loading time increases and that affects your speed insights web SEO statistics and that will cause a great loss to your competitors. Good websites are the ones people can easily reach and get what they were looking for while poor websites are the ones that take lots of time to deliver information to the visitor. Google hates poor user experience. 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 Your Google Font Codes At google fonts we are privileged to have a good dialogue box below whenever you choose a font to use. The fonts from the same font family are grouped together to avoid adding different scripts which will slow your websites longtime. Most of times its advisable to go to the maximum of one link in your website. You can load multiple Google fonts with a single line of code.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'>
3. Load Default Variants Of Google Fonts
Each font option allows you to load various styles of font. This expands the way we can utilize one font all through our website templates so us to come up with better optimized template font style that will run fast when rendered. 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.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 styled 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 styled 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>So try out these Google font tricks and change your website design for a greater impact.
<script>
WebFont.load({
google: {
families: ['Open Sans', 'Oswald']
}
});
</script>
Post a Comment