Google Fonts was first launched in 2010 and is an open source tool offering a variety of different font styles and icons that users can choose from. Google Fonts offers more than 1,000 free font styles and icons that can be used for both commercial and non-commercial purposes.
If you use a font (or script) that is commonly deployed, like Roboto, and source it from a very common source, like Google, then there is a good chance users will already have the font in cache from another site they have visited which also used that font and sourced it from Google. If so, your site will get the benefit. (This is not going to work as the way how browsers handle and storing cache has changed. Browsers such as Google Chrome in the year 2020 are starting to cache per origin. The global cache turned out to be a privacy leak.)
Why would anyone host assets offsite? Answer: because it’s easier. If you are confident in the CDN service that is serving up the assets, and you’re not trying to optimise your page to every possible extent, it is often easier and more consistent to use an asset that is stored offsite. By using commonly-used assets, like some Google fonts or FontAwesome, you might also get some caching benefits if users have already got your assets in cache somewhere.
Optimizing font loading
Ideally, the fonts load quickly and the page is rendered correctly the first time—but often that’s not the case, which brings us to the next scenario. The phenomenon of text being rendered in the fallback fonts and then re-rendering with the proper ones is known as a flash of unstyled text (FOUT)
Does hosting Google Fonts on your own server actually improve UX or just pagespeed scores?
The main difference between implementing web fonts that we host ourselves versus those from a web font delivery service, such as Google Fonts or Adobe Fonts, is that there’s no need to reference a third-party service in the <head> of your HTML document—you can simply add @font-face code to one of your own stylesheets.
The CSS to use is effectively the same as what’s provided by the font delivery services, the only real difference is that the path to the font file (i.e., src) will be a relative URL (e.g. ../fonts/FONT_FILE_NAME.woff2) rather than an absolute URL (e.g. https://fonts.gstatic.com/[...]/FONT_FILE_NAME.woff2).
- You should be comparing “your website serving fonts via the Google Fonts CDN” vs “your website serving fonts from your own CDN setup”. You should not be comparing this with “your website without a CDN at all”
- It’s a no-brainer now that your images, fonts, JS and CSS should all be backed and served by a CDN with long caching times. Look into Cloudflare.
Also:
- Self-hosting means the browser only needs to connect to your host to get the files it needs which might save some time over having to Google’s URL as well.
- The Google Font URL only contains a short CSS file with the actual font URLs in it. If you self-host and inline the CSS, the browser will discover and fetch the font URLs faster.
- Have you tried it? I self-host on a few of the sites I run and have found it faster generally.
A Hassle Free Way to Self Host Google Fonts Youtube Guide
A CDN is almost always* going to serve up the fonts faster to your clients than your standard webserver will.
Try to host as many site resources on CDN as possible – not on your webserver.