Better code for loading a font from Google Fonts

[eveneme]

Before:
<link href="https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,500,700,700i" rel="stylesheet" referrerpolicy="origin">

After:

<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=Inter:wght@400;500;700&amp;display=swap" rel="stylesheet">

[sudo-do]

preconnect is a useful attribute for establishing an early connection with a domain. However, for the specific case of loading fonts from Google Fonts, using prefetch may be a better option. Since fonts have a long cache time and are unlikely to change frequently (I have never seen one updated), using prefetch could help to faster page load times for subsequent page views.

• But I would like to add that browsers automatically cache frequently accessed resources, including fonts and stylesheets. That means even if you don't use prefetch, the browser will cache font files and load them faster on subsequent page loads!

These are my thoughts. However, as a high school student, I am open to hearing other opinions on this matter.

[adamus007p]

@eveneme why only fonts.gstatic.com has crossorigin?

[sudo-do]

@adamus007p fonts.googleapis.com is used only for retrieving information about the fonts