How to address prefetched assets from CSS?

Question

I'm trying to use prefetched resources, but I cannot figure out how to address them from CSS.

<link rel="prefetch" href="icons/fullscreen_1.svg" as="image" />
<link rel="prefetch" href="fonts/Quattrocento-Regular.ttf" as="font" />

The prefetching itself works with the link tags above. However, when I open the menu where the assets are needed, new requests are sent to the server.

Getting image/font in CSS:

.fscr_btn_state_off {
background-image: url("icons/fullscreen_1.svg");
}
@font-face {
font-family: quattrocento_reg;
src: url("fonts/Quattrocento-Regular.ttf");
}

It looks like using url(...) will always fetch the items in question again, regardless of any prefetching.
What would be the right value for background-image and src to get the image/font from the browser cache?

Answer 1

Hopefully this helps you:
https://www.digitalocean.com/community/tutorials/html-preload-prefetch