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
There are 3 ways in which you can load Google Fonts‚ @import, link rel and javascript. The link rel tag will allow you to place the code on the html and load it the fastest before the CSS file.
Here is an example:
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.
Fewer Fonts
Do you really need 6 different font types for your site? Absolutely not. It is best to design with 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.
http://fonts.googleapis.com/css?family=Open+Sans|F... rel='stylesheet' type='text/css'>
Conclusion
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!