Comment utiliser Google Fonts et l’affichage des polices —

Dans ce didacticiel, nous allons découvrir comment utiliser Google Fonts et les font-display propriété.

Google Fonts est une plate-forme open source gratuite qui offre une vaste bibliothèque de polices Web. En tant que développeur Web, l’intégration de ces polices dans vos projets est essentielle pour créer des conceptions visuellement attrayantes et cohérentes sur divers appareils. Un aspect crucial de l’utilisation efficace de Google Fonts est de comprendre le police-affichage qui détermine la façon dont une police est rendue pendant le processus de chargement.

Nous aborderons les sujets suivants :

1. Que sont les polices Google ?
2. Qu’est-ce que la propriété font-display ?
3. Comment ajouter des polices Google à votre projet
4. Comprendre les différentes valeurs font-display
5. Implémentation de la propriété font-display avec Google Fonts
6. Dépannage des problèmes courants

Que sont les polices Google ?

Google Fonts est une bibliothèque de plus de 1 000 familles de polices sous licence gratuite, fournie par Google. Ces polices peuvent être facilement intégrées à votre site Web pour créer une apparence unique, professionnelle et cohérente. Les polices Google sont optimisées pour les performances et l’accessibilité, ce qui les rend idéales pour le développement Web.

Qu’est-ce que la propriété font-display ?

La propriété font-display est une fonctionnalité CSS qui contrôle le comportement de rendu d’une police pendant le processus de chargement. Il détermine combien de temps le navigateur doit attendre qu’une police se charge avant d’afficher une police de secours ou un texte avec des caractères invisibles. En utilisant la propriété font-display, vous pouvez optimiser l’expérience utilisateur en réduisant l’impact du chargement lent des polices sur la conception et les performances de votre site Web.

Comment ajouter des polices Google à votre projet

Il existe deux méthodes principales pour ajouter des polices Google à votre projet : la liaison et l’importation.

Lier les polices Google

La liaison est la méthode la plus courante pour ajouter des polices Google à votre projet. Pour le faire, suivez ces étapes:

1. Visitez les polices Google site Internet.
2. Parcourez ou recherchez la police que vous souhaitez utiliser.
3. Cliquez sur la police pour ouvrir sa page de détails.
4. Sélectionnez les styles de police et les poids dont vous avez besoin en cliquant sur les cases à cocher ou en utilisant le curseur.
5. Cliquez sur le bouton « Sélectionner ce style » pour ajouter les styles de police sélectionnés à votre collection.
6. Ouvrez l’onglet « Intégrer » et vous verrez une balise de lien que vous pouvez ajouter à la section d’en-tête de votre fichier HTML.

Par exemple, pour ajouter la police « Roboto », la balise de lien ressemblera à ceci :

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Importation de polices Google

Vous pouvez également importer des polices Google à l’aide du @import règle dans votre fichier CSS. Pour le faire, suivez ces étapes:

1. Suivez les étapes 1 à 5 de la méthode de liaison.
2. Dans le Intégrer onglet, passez à l’onglet @importer languette.
3. Copiez l’extrait de code fourni et collez-le en haut de votre fichier CSS.

Par exemple, pour importer la police « Roboto », le @import la règle ressemblera à ceci :

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Comprendre les différentes valeurs font-display

La propriété font-display a cinq valeurs possibles, chacune avec un comportement de rendu différent :

• auto
• bloc
• échanger
• se retirer
• facultatif

Auto

Le auto La valeur laisse le comportement de rendu des polices aux paramètres par défaut du navigateur. Cette option peut entraîner un rendu incohérent sur différents navigateurs :

font-display: auto;

Bloc

Le block indique au navigateur de masquer initialement le texte et d’attendre que la police se charge. Si la police ne se charge pas dans un court laps de temps, le navigateur affichera la police de secours. Une fois le chargement de la police personnalisée terminé, le navigateur permutera le texte pour utiliser la police personnalisée. Cette méthode peut entraîner un « flash de texte invisible » (FOIT) en attendant le chargement de la police :

font-display: block;

Échanger

Le swap value indique au navigateur d’afficher immédiatement le texte en utilisant la police de secours et de passer à la police personnalisée une fois qu’elle est chargée. Cette méthode peut provoquer un « flash of unstyled text » (FOUT) mais garantit que le texte est visible pour l’utilisateur dès le début :

font-display: swap;

Se retirer

Le fallback la valeur est une combinaison de block et swap. Le navigateur masquera initialement le texte pendant une brève période (généralement environ 100 ms). Si la police personnalisée se charge dans ce délai, le navigateur l’affichera. Sinon, il affichera la police de secours. Après une période plus longue (généralement environ trois secondes), si la police personnalisée n’a toujours pas été chargée, le navigateur abandonnera et continuera à utiliser la police de secours :

font-display: fallback;

Facultatif

Le optional la valeur est similaire à fallback mais avec une période d’attente plus courte pour le chargement de la police personnalisée. Si la police personnalisée ne se charge pas dans ce court laps de temps (selon le navigateur), le navigateur abandonnera et continuera à utiliser la police de secours. Cette méthode donne la priorité à l’expérience utilisateur et aux performances par rapport au rendu exact des polices :

font-display: optional;

Implémentation de la propriété font-display avec Google Fonts

Google Fonts vous permet de définir le font-display valeur directement dans le lien ou @import URL. Pour ce faire, suivez l’une des options ci-dessous.

Utilisation de la méthode des liens

• Suivez les étapes 1 à 6 de la section de liaison au-dessus de.
• Dans le Intégrer onglet, localisez l’onglet Personnaliser section.
• Dans le Affichage des polices menu déroulant, choisissez le font-display valeur.
• La balise de lien sera mise à jour avec la sélection font-display valeur. Ajoutez la balise de lien mise à jour à la section d’en-tête de votre fichier HTML.

Par exemple, pour ajouter la police « Roboto » avec un font-display valeur de swap:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Utilisation de la méthode @import

• Suivez les étapes 1 à 3 de la méthode d’importation au-dessus de.
• Dans le Intégrer onglet, localisez l’onglet Personnaliser section.
• Dans le Affichage des polices menu déroulant, choisissez le font-display valeur.
• Le @import la règle sera mise à jour avec la sélection font-display valeur. Ajouter la mise à jour @import règle à votre fichier CSS.

Par exemple, pour importer la police « Roboto » avec un font-display valeur de swap:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Dépannage des problèmes courants

Voici quelques problèmes et solutions courants lors de l’utilisation de Google Fonts et de font-display propriété.

Problème : La police personnalisée ne se charge pas ou ne s’affiche pas

• Assurez-vous d’avoir correctement ajouté la balise de lien ou @import règle à votre fichier HTML ou CSS.
• Vérifiez les fautes de frappe ou les URL incorrectes dans le lien ou @import code.
• Vérifiez que le nom et le poids de la famille de police corrects sont utilisés dans vos règles CSS.

Problème : Flash de texte invisible (FOIT) ou flash de texte sans style (FOUT)

• Choisissez un autre font-display valeur pour mieux répondre à vos besoins. Par exemple, si vous rencontrez FOIT, essayez d’utiliser swap ou fallback. Si vous rencontrez FOUT, envisagez d’utiliser block ou fallback.
• Assurez-vous que votre police personnalisée est chargée le plus tôt possible dans le processus de chargement de la page en plaçant le lien ou @import code près du haut de la section d’en-tête ou du fichier CSS.
• Optimisez la taille de votre fichier de polices en sélectionnant uniquement les styles et poids de police nécessaires.

Problème : Rendu des polices incohérent dans les navigateurs

• Définissez un font-display valeur au lieu d’utiliser la auto valeur pour assurer un comportement cohérent entre les différents navigateurs.
• Testez votre site Web sur différents navigateurs pour identifier tout problème de rendu et apporter les ajustements nécessaires à votre CSS.

C’est ça!

Conclusion

Dans cet article, nous avons exploré comment utiliser Google Fonts et le font-display propriété pour créer des sites Web visuellement attrayants et performants. En comprenant les différents font-display valeurs et leurs implications, vous pouvez optimiser le rendu de vos polices pour une meilleure expérience utilisateur. Assurez-vous de tester votre implémentation sur différents navigateurs et appareils pour garantir une apparence et des performances cohérentes.

En tant que développeur Web, intégrant Google Fonts et le font-display propriété dans vos projets vous permettra de créer des conceptions professionnelles et accessibles qui s’adressent à un large éventail d’utilisateurs.