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

1 Answer 1


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.

  • 1
    Should 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.
    – Steve
    Commented Apr 2, 2021 at 0:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.