I was considering adding rel=preload to my <link> tag in order to preload my site’s main font, when I noticed that it already contained rel="stylesheet":
<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=Open+Sans:ital,wght@1,300&display=swap" rel="stylesheet">
To my understanding, the rel attribute is used for identifying stylesheets, so why does Google use it for fonts? What advantage(s) does it offer?
>Solution :
If you visit the link served by Google Fonts, you’ll notice that it’s actually a stylesheet. When you import a font from a CDN, it’s generally a stylesheet filled with @font-face rules that define a new font from several source file URLs (generally WOFF, WOFF2, TTF, or OTF formats). The same thing happens when you use @import to add fonts from an external source – it’s importing a stylesheet, not just a font sourcefile.