Les polices sont soumises à une règle d'origine croisée dont les images et les scripts sont exemptés. Servez-en une depuis un autre nom d'hôte sans le bon en-tête : le navigateur la télécharge, refuse de s'en servir et bascule sur le repli — le fichier est donc en 200 dans le panneau réseau, et la console l'explique dans un message que personne ne lit.

Le message

Access to font at 'https://cdn.example.com/f/inter.woff2' from origin
'https://yourdomain.com' has been blocked by CORS policy

L'en-tête

# nginx, on the host SERVING the font
location ~* \.(woff2?|ttf|otf|eot)$ {
    add_header Access-Control-Allow-Origin "https://yourdomain.com";
    add_header Cache-Control "public, max-age=31536000, immutable";
}
# apache / litespeed
<FilesMatch "\.(woff2?|ttf|otf|eot)$">
    Header set Access-Control-Allow-Origin "https://yourdomain.com"
</FilesMatch>

crossorigin sur le préchargement, si vous préchargez

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
Sans crossorigin sur cette balise, la police est téléchargée DEUX FOIS — une fois par le préchargement, une fois par la feuille de style, car ce sont deux requêtes distinctes. La page est plus lente qu'elle ne l'aurait été sans aucun préchargement.

La réponse la plus simple

Servez les polices depuis votre propre domaine. Même origine signifie : pas de question CORS, pas de résolution DNS supplémentaire, pas de seconde poignée de main TLS, et un tiers de moins dans la page. Avec HTTP/2, il n'y a plus d'argument de vitesse pour un CDN de polices.

# download once, commit them, serve from /fonts/
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}
font-display: swap affiche le repli immédiatement et permute quand la police arrive. Sans lui, le texte reste invisible jusqu'à trois secondes sur une connexion lente.