I'm declaring preload links for a CSS file containg ONLY @font-face rules.
Should I add <link rel="preload" href="styles.css" as="style"> as="style" or <link rel="preload" href="styles.css" as="font"> as="font"?
Add a comment
|
1 Answer
Since you are attempting to load styles.css which is a style sheet, you should use as="style"
If you were loading a font it would look something like this <link rel="preload" href="fonts/some-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
If you have a look at this article https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content you can see that there are a number of different types of content that can be pre-loaded using this technique.
-
1Should the use preload links for both the css file and the font URLs it contains? Commented Apr 1, 2021 at 8:47
-
@StephenOstermiller Good question...maybe you can ask it ;o) I am not sure, I suspect that pre-loading the CSS will also pre-load the font it contains, but some testing would verify that.– SteveCommented Apr 2, 2021 at 0:15