web-dev-qa-db-fra.com

Précharge font-génial

J'essaie de précharger font-awesome pour améliorer les temps de chargement de ma page:

        <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
        <link rel="preload" as="font" type="font/woff2" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Cependant ... Chrome semble télécharger la police deux fois et signale 

La ressource http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0 A été préchargée à l'aide de lien préchargé mais non utilisé dans quelques secondes à partir de l'événement de chargement de la fenêtre. Veuillez vous assurer qu'il n'a pas été préchargé pour Rien.

 enter image description here Comment puis-je le faire fonctionner?

font-awesomepreload
4
DD.

Vous devez ajouter l'attribut crossorigin lors du préchargement des polices.

    <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
    <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
4
Barry Pollard

En plus de marquer un lien comme feuille de style de préchargement avec rel="preload" (ce que vous avez déjà fait), nous devons également utiliser JavaScript pour basculer l'attribut rel sur stylesheet lorsque le fichier est chargé:

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

1
user10726299

Essayez d'utiliser cette méthode:

<style>
@font-face {
      font-family: 'FontAwesome-swap';
      font-display: swap;
      src: local('FontAwesome'), url(https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0) format('woff2');
    }
</style>
0
Ahmad Subhan