This CSS-Tricks article on the basics of Google Web Font API talks about the two main ways to load Google Web Fonts in your project. We all know them but I think a lot of us blindly follow the advice posted on CSS Tricks. Let me add some context to these tips.
Loading CSS with a
Google gives you the link tag to paste into your site. Most people load their fonts this way. Is it the best way though? Spoiler alert: Yes. It is the best way with one caveat. Google gives you a link that looks like this
<link href='http://fonts.googleapis.com/css?family=Lora:400|Muli:300' rel='stylesheet' type='text/css' />. If your site is not on HTTPS and you plan to never use a certificate to secure it then this is fine. For the rest of us, a better way is to leave off the protocol so that the link ends up looking like this instead:
The difference is that we leave off the
http:// part. This allows a user to load the font over whatever protocol the site is on. So if you had an HTTP and HTTPS version of your site (which you shouldn’t, pick one or the other) then the request to Google will be over whichever protocol the site is being served on. This ensures that you don’t get any mixed content warnings if you’re site is using SSL and you have the freedom to start using HTTPS without having to change any of your static asset links. Ideally, you should reference all your assets in this way. It works in every browser (yeah, including IE6).
FOUT should not be an issue for most of us. If you’re not providing fallback fonts then you’re asking for trouble. The web is all about text (unless you’re on YouTube). Preventing a user from reading your text because you want it to have the exact font you specified is like not selling someone your product because you want them to give you cash in a very specific way (imagine if McDonal’s would only sell you items from the dollar menu if you provided 3 quarters, a nickel, 1 dime, and 10 pennies). So first off, use a fallback and if the font fails to load your users won’t hate you.