Why does Google Fonts add "rel=stylesheet" to its fonts?-CodePudding

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?

CodePudding user response：

the attribute rel is to identify the relationship between the object and link you are trying to add. But stylesheet is the value specifying the styling nature of the link. Font is the style feature you try to alter in your original object.

CodePudding user response：

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.