Polices tierces

Il est extrêmement important de livrer les polices rapidement: une livraison des polices plus rapide signifie non seulement que le texte sera visible par l'utilisateur plus rapidement, mais cela a également un impact important sur la cause des décalages de mise en page. Si une police ne peut pas être diffusée avant qu'elle ne soit nécessaire, un décalage de mise en page se produit généralement lors du remplacement de la police. La taille de ce décalage de mise en page peut varier en fonction de la correspondance entre la police de remplacement et la police Web. Pour voir ce phénomène en action, regardez la démonstration et comparez les décalages de mise en page qui se produisent sur une connexion rapide par rapport à une connexion lente.

L'exemple ci-dessous combine deux techniques de performances pour charger une police tierce le plus rapidement possible: l'utilisation de déclarations de police intégrées et de suggestions de ressources preconnect. Bien que cet extrait de code montre comment charger des polices à partir de Google Fonts, ces techniques s'appliquent également à d'autres fournisseurs de polices tiers.

  • Déclarations de police intégrées: l'intégration des déclarations font-family dans le document principal, au lieu d'inclure ces informations dans une feuille de style externe, permet au navigateur de déterminer les fichiers de police à utiliser sur la page sans avoir à attendre le téléchargement d'une feuille de style distincte. Ce point est important, car les navigateurs ne téléchargent généralement pas les fichiers de police tant qu'ils ne savent pas qu'ils sont utilisés sur la page. Dans la plupart des cas, il est préférable d'utiliser preload pour charger des polices dans les déclarations de police intégrées.

  • Préconnexion: la méthode recommandée pour charger Google Fonts consiste à utiliser la balise <link> avec les indications de ressources preconnect. L'indice de ressource preconnect établit une connexion précoce avec l'origine tierce. Dans l'extrait de code ci-dessous, le premier indice de ressource configure une connexion pour télécharger la feuille de style de police et le deuxième indice de ressource à une connexion pour le téléchargement de fichiers de police.

Exemple :

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>