Personnalisation des performances des polices web avec les paramètres font-display

Découvrez comment utiliser les paramètres font-display pour modifier les performances des polices web.

Le paramètre font-display vous permet de spécifier la manière dont les polices web sont chargées dans le navigateur web et appliquées à votre site web. Il existe cinq options pour font-display :

Valeur de font-display 

Comportement 

Auto

Permet au navigateur d’utiliser sa méthode par défaut pour charger la police.

Block

Masque le texte sur votre site web jusqu’à ce que la police web soit téléchargée. Les visiteurs de votre site web peuvent voir un flash de texte invisible ou FOIT avec cette option.

Swap

Affiche la police de secours que vous avez définie dans le fichier CSS en attendant que la police web soit téléchargée. Les visiteurs de votre site web peuvent voir un flash de texte sans style ou FOUT avec cette option.  

Fallback

Utilise le comportement de blocage pendant une courte période, puis passe au comportement de permutation et applique la police de secours au texte. Si les polices web n’ont pas été chargées avant la fin de la période de permutation, la police de secours continue à être utilisée. 

Optional

Utilise le comportement de blocage pendant une courte période, puis applique la police de secours au texte. Cette valeur donne au navigateur web la possibilité de ne pas télécharger du tout la police web, par exemple si le visiteur du site dispose d’une connexion Internet trop lente. 

Pour plus de détails techniques sur font-display et les valeurs prises en charge, reportez-vous à la spécification CSS Fonts Module Level 4.

Remarque :

Par défaut, les projets de polices web sont créés avec font-display défini sur auto.

Pour personnaliser le paramètre font-display, procédez comme suit :

  1. Dans la page de vos projets web, cliquez sur Modifier le projet.

    Modifier le projet
    Modifier le projet

  2. Sélectionnez une des valeurs font-display suivantes dans la barre latérale. Par défaut, le paramètre font-display des projets de polices web est défini sur auto.  

    paramètres font display

  3. Cliquez sur Enregistrer les modifications et la valeur de font-display est appliquée à votre site web en quelques minutes.

Le nouveau paramètre font-display est automatiquement inclus dans votre site web, dans le code intégré existant.

Mettre à jour des projets web existants

La prise en charge de font-display a été ajoutée au chargement des polices web d’Adobe en septembre 2020. Les projets web créés avant septembre 2020 ont été mis à jour de manière à utiliser le comportement par défaut font-display : auto

Le paramètre font-display d’un projet existant peut être modifié en suivant les étapes ci-dessus. Une fois les modifications enregistrées, le nouveau paramètre font-display sera inclus dans votre site web, dans le code intégré existant. Il n’est pas nécessaire de modifier le site web proprement dit. 

Logo Adobe

Accéder à votre compte