How to set rel=preload in CSS?

Question

I import fonts like this:

@font-face{
    font-family:fname;
    src:url(../fonts/fname.woff) format('woff'),
    url(../fonts/fname.ttf) format('truetype');
    font-weight:400;
}

Also when I analysis my website using SEO tools (ex. google page speed insight), they suggest using rel="preload"for those fonts. Since I don't use HTML for importing that fonts to the page, any idea how can I use that HTML attribute using CSS?

What do you mean of `I don't use HTML for importing those fonts` ? you have to use `rel="preload"` on your `` tag, where you import css that include your fonts. [Read](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) — Pedram, Jan 01 '20 at 09:53
If you are using a framework such as bootstrap, they import the fonts in their css files ... so you are not necessarily doing this on purpose, but the framework is doing it. — Erick ls, Jan 01 '20 at 10:11
Not purely in css, may be this helps https://stackoverflow.com/questions/1330825/preloading-font-face-fonts/46830425 — Awais, Jan 01 '20 at 10:29

score 3 · Answer 1 · edited Oct 31 '22 at 21:31

3

You can try this:

<link rel="preload" as="font" href="../fonts/fname.woff" type="font/woff" crossorigin="anonymous">

Also you can check this post

edited Oct 31 '22 at 21:31

TylerH

20,799
66
75
101

answered Jan 01 '20 at 09:58

Erick ls

186
8

How to set rel=preload in CSS?

1 Answers1