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
<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
families: [‘Open Sans’, ‘Oswald’]