Google Fonts maintains 30+ optimized variants for each font and automatically detects and delivers the optimal variant for each platform and browser. If I change my user-agent to Internet Explorer 11, I’m served the font in the WOFF format instead.įinally, if I change my user agent to IE8 then I get the font in the EOT (Embedded OpenType) format. I’m using the latest version of Chrome, which like most browsers supports WOFF2, so the font is served to me in that highly compressed format. When the browser makes a request to the API, Google first checks which file types the browser supports. However, if I request the same font variant from the API, I’m provided with this file. Let’s look at Roboto, GitHub tells us that the regular variant weighs 168kb.ġ68kb for a single font variant. The Google Fonts API does more than just provide the font files to the browser, it also performs a smart check to see how it can deliver the files in the most optimized format. However, get it wrong and your users could be waiting up to a few seconds before any text is displayed. With the correct setup, the additional load time isn’t noticeable. Each font carries a weight that the web browser needs to download before they can be displayed. Like all good things, Google Fonts do come with a cost. For example, Arial and Georgia are packaged with Windows, macOS and Linux distributions. System fonts or ‘Web Safe Fonts’ are the fonts most commonly pre-installed across operating systems. Without Google Fonts you would be limited to the handful of “ system fonts” installed on your user’s device. As of writing, they have been viewed over 29 trillion times across the web and it’s easy to understand why - the collection gives you access to over 900 beautiful fonts you can use on your website for free.
It’s fair to say Google Fonts are popular. Let’s explore how we can load them in the most optimal way. Google Fonts are easy to implement, but they can have a big impact on your page load times.
0 kommentar(er)
