Preload fonts to speed up website, don't download them twice?

Question

I want to preload the both fonts I am using from this file here: https://res.cloudinary.com/prodigy-official-de/raw/upload/v1581064331/www.prodigy-official.de%20resources/fonts/font.style.css

So what I tried is this code here:

<link rel="preload" href="https://res.cloudinary.com/prodigy-official-de/raw/upload/v1578333925/www.prodigy-official.de%20resources/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font">
<link rel="preload" href="https://res.cloudinary.com/prodigy-official-de/raw/upload/v1999999/www.prodigy-official.de%20resources/fonts/icomoon.woff2?10si43" as="font">

But! He preloads the both fonts in the links, and downloads the fonts again in the font.style.css. So it don't work. The result is here:

How can I archive to still download the both fonts but only once? and use this prefetch cache in the font-face url?

Answer 1

Try adding to the links

type="font/woff2" crossorigin

so it will be for example

<link rel="preload" href="https://res.cloudinary.com/prodigy-official-de/raw/upload/v1578333925/www.prodigy-official.de%20resources/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font" type="font/woff2" crossorigin>

It worked for me and the font file is being downloaded only once, I guess it need it to make sure those are exactly the same files...

CORRECTION! The answer above is the right way to do that, meaning you must define the also the MIME type in order the file will not be downloaded twice. BUT Specifically for the question above, as FAIK, Cloudinary, supports only images and videos! meaning you can serve some raw file from it, but it will not be retrieved with the right MIME type, instead it will be downloaded as document and so, it will be downloaded twice...