CODEWITHSUNDEEP
htmlcssfontswebfontsgoogle-fonts
Hashim Aziz
Hashim Aziz

Reputation: 6155

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

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?

Upvotes: 0

Views: 990

Answers (2)

alifromim
alifromim

Reputation: 13

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.

Upvotes: 1

micahlt
micahlt

Reputation: 424

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.

Upvotes: 3

Related Questions