Charger les polices avec maîtrise

Une police distante ou chargée tardivement peut laisser un texte invisible, puis modifier sa forme et sa largeur lorsqu’elle arrive. Sur la page de l’atelier de jardinage, cela peut déplacer le titre, les horaires ou le bloc de contact au moment où la personne commence à lire. Vous allez configurer les fichiers de police, choisir le comportement d’affichage et ne précharger que la ressource réellement prioritaire.

Déclarer les fichiers et leurs caractéristiques

Pour garder le comportement prévisible, hébergez les fichiers de police avec les ressources du site et indiquez précisément leur format, leur graisse et leur style. Dans cet exemple, la famille « Atelier Sans » comporte deux fichiers WOFF2 statiques : un pour le texte courant et un pour les titres en gras. Les noms de famille déclarés dans `@font-face` sont des noms internes à votre feuille de style ; ils n’ont pas à correspondre au nom commercial du fichier.

@font-face {
    font-family: "Atelier Sans";
    src: url("/fonts/atelier-sans-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Atelier Sans";
    src: url("/fonts/atelier-sans-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

body {
    font-family: "Atelier Sans", Arial, sans-serif;
    font-weight: 400;
}

h1,
h2,
.workshop-card__title {
    font-weight: 700;
}

Chaque déclaration associe un fichier à une famille et à une graisse. Si vous omettez `font-weight`, le navigateur traite généralement la face comme une graisse normale ; il peut alors simuler le gras pour un titre au lieu d’utiliser le fichier prévu. Déclarez une face distincte pour chaque graisse réellement fournie, et ne demandez pas une variante italique si aucun fichier correspondant n’est disponible.

Choisir le comportement pendant le chargement

`font-display` définit ce que le navigateur montre pendant qu’il récupère une police. Avec `swap`, le texte apparaît rapidement dans une police de remplacement, puis bascule vers la police personnalisée lorsqu’elle est prête. Cette stratégie favorise la lisibilité immédiate, mais le remplacement peut modifier la largeur des lignes et provoquer un déplacement du contenu.

D’autres valeurs conviennent à d’autres priorités. `block` peut laisser le texte invisible brièvement avant d’afficher la police, puis utiliser une police de remplacement si le chargement tarde ; ce choix est risqué pour des informations que la personne doit lire tout de suite. `optional` privilégie l’affichage immédiat et peut conserver la police de remplacement pendant la visite si la police personnalisée n’arrive pas rapidement. Pour la page de l’atelier, `swap` est un choix simple : le contenu reste lisible, à condition de limiter la différence entre la police de secours et la police finale.

Précharger uniquement la police critique

Le navigateur découvre normalement une police lorsqu’il analyse les styles qui l’utilisent. Vous pouvez accélérer la découverte d’un fichier nécessaire dès le premier affichage en le préchargeant dans le document HTML. La graisse normale d’« Atelier Sans » sert au texte courant de la page ; précharger ce seul fichier peut donc être pertinent si la police est bien utilisée au-dessus de la ligne de flottaison.

<link
    rel="preload"
    href="/fonts/atelier-sans-regular.woff2"
    as="font"
    type="font/woff2"
    crossorigin
>

Placez ce lien dans le `` du document. L’attribut `crossorigin` doit être présent pour le préchargement d’une police, y compris lorsque le fichier est servi depuis le même domaine. Le chemin et les options doivent correspondre à ceux de `@font-face` ; sinon, le navigateur risque de télécharger deux fois la ressource. Le préchargement donne une priorité plus élevée au fichier : ne l’appliquez pas à toutes les graisses ou à des polices peu utilisées, car elles pourraient retarder d’autres ressources importantes.

Vérifier le chargement

Testez avec le cache désactivé et une connexion ralentie dans les outils du navigateur. Le texte doit rester lisible avant l’arrivée du fichier ; vérifiez ensuite que le titre, les horaires et le contact ne changent pas de façon gênante quand la police finale s’applique. Dans l’onglet réseau, confirmez que le fichier attendu est chargé une seule fois et que le préchargement ne vise pas une ressource inutilisée. Le suivi détaillé des déplacements de mise en page sera traité dans la leçon consacrée à la prévention des sauts.

À retenir

• Déclarez chaque fichier avec une famille, une graisse et un style exacts dans `@font-face`.
• Choisissez `font-display` selon l’équilibre recherché entre affichage immédiat et usage de la police personnalisée.
• Préchargez seulement une police critique utilisée dès le premier affichage ; vérifiez le chemin et `crossorigin`.
• Testez le remplacement sur une connexion ralentie et contrôlez la lisibilité ainsi que les changements de largeur du texte.

Dans la prochaine leçon, vous apprendrez à réserver l’espace des médias pour stabiliser davantage la mise en page pendant le chargement.