web-dev-qa-db-fra.com

préchargement de la police avec rel précharge

Je précharge une police à l'aide du <link>Tiquette HTML avec l'attribut rel défini sur préchargé tel que capturé dans l'extrait ci-dessous;

<link rel="preload" href="fonts/32ADEO.woff2" as="font" type="font/woff2">

Bien que cela fonctionne comme prévu en chargeant le caractère, il est chargé à nouveau.

La capture d'écran de l'onglet réseau dans Google Chrome indique le chargement de la police de caractères deux fois - voir ci-dessous;

enter image description here

De plus, l'avertissement suivant apparaît dans l'onglet de la console de navigation de Google Chrome;

La ressource https://example.com/new-v8/fonts/32A0E0.woff2 a été préchargée à l'aide du préchargement du lien, mais n'a pas été utilisée quelques secondes après l'événement de chargement de la fenêtre. Assurez-vous qu'il a bien une valeur "en tant que" appropriée et qu'il est préchargé intentionnellement.

Qu'est-ce que je fais mal et comment puis-je le réparer?

16
Gareth Jones

Votre balise de précharge prend l'argument "crossorigin", qui doit être donné pour les Webfonts, même s'ils se trouvent sur le même hôte que votre site Web.

Voir https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-Origin_fetches ou https://www.smashingmagazine.com/2016/ 02/preload-what-is-it-good-for/# début-chargement-de-polices .

18
Thomas Puppe