Why Google Font preconnects to fonts.googleapis.com

Question

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">

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.

Answer 1

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/articles/preconnect-and-dns-prefetch

Answer 2

I had the same question. After a couple months scratching my head over what Google's rationale for this might be, here's what I came up with:

First note that HTML is parsed sequentially. As the browser encounters elements that reference external resources such as CSS files, JavaScript files, and images, it initiates requests to fetch those resources, often doing so asynchronously to avoid blocking the parsing of the remaining HTML. As it parses the HTML the browser creates a list of resources that need to be fetched and processed. This list is often referred to as the "resource queue." Browsers use different heuristics to prioritize the resources in the resource queue, allocating more bandwidth and processing power to higher-priority resources.

The preconnect to fonts.googleapis.com might initially seem to offer minimal time-saving benefits since the actual CSS request comes right after. However, it still makes sense for Google to include the preconnect hint because Google cannot predict the exact structure of the element in every website that uses their fonts.

In cases where the font-related elements appear towards the end of the head, the browser might already be prioritizing the loading of other resources, possibly against a sluggish or unreliable network connection. By including the preconnect hints, you're providing the browser with additional information about the importance of establishing a connection to a specific domain. This can help the browser prioritize the connection establishment process, ensuring that it happens as early as possible, even if the actual request for the resource comes (code-wise) shortly after the preconnect hint.

Furthermore, during the course of developing a website, developers might inadvertently add more lines of code, such as JavaScript or fonts from other domains, between the preconnect and the CSS request. This could increase the distance between the preconnect hint and the actual CSS request. In such scenarios, depending on network conditions and resource prioritization by the browser, the time-saving benefits of using preconnect could become more significant.

Answer 3

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.