4 Tips To Faster Loading Google Fonts
Load Google Fonts First Before CSS
Place the Google import code such that it loads first directly after the html HEAD tag, EVEN before loading the CSS file. This ensures the fonts load before the CSS so there isn't any unexpected "jumping" of when the font finally loads. This is actually becoming very common in sites that I have seen recently.
Use Link Format
Here is an example:
<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 results in a poor user experience as explained above.
Do you really need 6 different font types for your site? Absolutely not. It is best to choose a maximum of two fonts – one bold type for headlines and a high readability font for main body text. Obviously, the more fonts you choose to load from Google, the slower the page load, and surprisingly this can add up pretty quick.
Combine Your Font Codes
You can load multiple Google fonts with a single line of code. This means you do not need to have separate rows of code for each font you load. See the example below where I have combined the Open Sans and Fenix font.
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Fenix' rel='stylesheet' type='text/css'>
Like every other element in your website, keep it minimal. Try these tips out if you are loading fonts differently than what we have covered here and see if it makes a difference. Depending on the size of your site, it may not be easily noticed, this is where the 'Network' tab within Chrome's inspect element feature shines. You will probably see a decrease somewhere in the ms, and believe me, every bit counts!