Why Google Font preconnects to fonts.googleapis.com

Partha Maity 0
Viewed 13

I want to add Quicksand Font to my website so google prompted me to add the following -

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=**Quicksand:wght@500**&display=swap" rel="stylesheet">

My question is - what is the advantage we are going to get with first line of code i.e. preconnecting to fonts.googleapis.com

I mean I get the point of preconnecting to fonts.gstatic.com as the fonts files are residing in that domain

google-font-api web html
2 Answers

Modern browsers try their best to anticipate what connections a page will need, but they cannot reliably predict them all. The good news is that you can give them a (resource ) hint.

Adding rel=preconnect to a informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.

https://web.dev/i18n/en/preconnect-and-dns-prefetch/

userx3fm10

All major browsers (Google Chrome, Apple Safari, Microsoft Edge) displays a blank space in place of the text that uses the font until the font has loaded.

Mozilla Firefox alone displays the text in the default font, and then re-renders text in the font once it has loaded.

So to have better user experience, the Link Type rel="preconnect" is used so that when the link is followed the linked content can be fetched more quickly.

MDN Documentation:

Link types: preconnect

The preconnect keyword for the rel attribute of the element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.

Browser specific behaviors of different browsers with web fonts is as follows

Google Chrome
Chrome renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

Mozilla Firefox
Firefox first displays the text in the default font, and then re-renders text in the font once it has loaded. This behavior is known as a "flash of unstyled text."

Apple Safari
Safari renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

Microsoft Internet Explorer
Internet Explorer renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

user1z40
Related