I don’t think this is an epidemic or anything, but I’ve seen it done a few times and even advocated for. This is what I mean…
You go to Google Fonts and pick a font like Open Sans, and it gives you either a <link> or an @import with a URL there in which to ready this font for usage on your site.
You can take a peek in there and see what it returns…
It’s just some @font-face declarations, of course!
Now your performance-minded brain kicks off. Wait. So, I make one HTTP request for this stylesheet, and then it makes more HTTP requests for those woff2 files it’s linking up. Screw the middle man here, why not just copy those @font-face blocks right out of here and use them.
You can! But!
The issue is that Google does fancy Google things here and the contents of that original stylesheet changes based on the browser requesting it. That screenshot above is Chrome 66. Here’s Firefox 20 on Windows 7:
It’s different! It’s only got woff, not woff2. If we open that URL in IE 8, we’d get an @font-face block that includes the eot format!
The point is, what that URL gives is very specific to what the current browser needs. That’s a pretty cool thing to abstract away and not worry about. Should new browsers have new formats and new CSS syntax needed, that’ll just come along for the ride.
Not that Google Fonts is perfect with this stuff. For example, by not controlling your own @font-face blocks, you can’t take advantage of font-display, which is a shame. Maybe we’ll get that someday, or maybe it’s worth self-hosting your Google Fonts, which is another whole thing we’ll get into someday.
What if I choose the provided download option and self-host the font?
http://michaelboeke.com/blog/2013/09/10/Self-hosting-Google-web-fonts/
This can help you a little bit
Sending traffic to Google? No way. All Google fonts are open source. Just download and host them yourself. Better performance, better ethics.
Exactly! And in certain countries, Google is blocked and without a VPN all you get is slow-loading websites, self-hosting all the way.
You then miss out on browser caching and it’s less of a load on your servers (which are probably slower than Google’s anyways).
Why would you miss out on browser caching? If you’re self hosting, you are able to cache the webfont files yourself.
What happens if Google’s cache of that particular hashed version of the font expires and your fonts disappear? The stylesheet URL is a permalink, but the font file paths may not be – the stylesheet can be updated by Google when the font file changes, but your statically defined font URLs will not be.
By hotlinking to their CDN you’re paying for your webfont with a small piece of your user’s privacy. This was brought up on their Github repo, but wasn’t resolved in a particularly satisfactorily manner, unfortunately: https://github.com/google/fonts/issues/1495
https://google-webfonts-helper.herokuapp.com/fonts This is nice for local Hosting!
As others already stated, it isn’t a good idea to link out to Google-hosted stylesheets either. It is better to download the font bundles and manually set up a stylesheet using the formats and styles you actually want. Upload the font assets to your web server or whatever CDN you are already using for the purpose.
Aside from the reasons already mentioned, it is worth pointing out that many networks will refuse to load Google-hosted stylesheets because the DNS entry for fonts.googleapis.com was recently remapped to a (frequently blacklisted) advertising domain, googleadapis.l.google.com.
Oops. Haha.
While at first this affected only the subset of Internet users with DNS-based ad blocking and/or censorship firewalls, but now that GDPR is in full swing, more and more users are blocking Big Brother entities like Google and Facebook outright.
Does hosting your own fonts affect browser caching? If I’m referencing a font hosted on my server, would a browser still use a cached version if available?
Concerning GDPR, see https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users, which should be linked in the privacy policy if you use Google fonts. Bottom line: no cookies, but there is no denial IPs and referrers are logged and browser profiling may be done.
I Actually got bit by linking Google Fonts on a internally hosted project without internet access. It can take a minute or more to load a URL.
I always use https://google-webfonts-helper.herokuapp.com/fonts to download fonts from Google Fonts.
And seriously, nowadays who still needs to include ttf? Look at browser support for woff & woff2 https://caniuse.com/#search=woff
If you want to get into layered fonts or multi-colored fonts; It looks like the only way to do this is self hosting and making a 2nd derivative font, which will be rendered in a different color, from the open source font to layer it on top of the plain color font.
Unless google is willing to host derivative fonts for layering?