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