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