Google Web 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. The developer adds the Google fonts the script reads font files from Google Fonts 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 that 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 below the head such that it loads 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. Place it on top of the HTML and load it fastest before the CSS file. Link format makes it easy to retrieve fonts and CSS styles. Derived from the Google font server 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, although you may add it at the top of the CSS file. You may add Flash, but according to SEO never add Flash since search engines can’t render Flash resources which is a poor web experience for your visitors.
2. Load Fewer Fonts
The more you add many fonts to your template, the more 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? It’s 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 to avoid adding different scripts which will slow your website’s longtime. Most of the time it’s advisable to go to a maximum of one link on 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 Web 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 we to come up with a better-optimized template font style that will run fast when rendered. Do you need to add all the variants and multiply 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 a 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 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>
<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.
