Comment charger et utiliser des polices CSS personnalisées : un guide complet
L’auteur a choisi le Fonds pour la diversité dans les technologies afin de recevoir un don dans le cadre du programme Write for DOnations.
Introduction
L’identité visuelle d’un site web est en grande partie dictée par deux principes de conception : la couleur et la police de caractères. Au cours de la dernière décennie, de grands progrès ont été réalisés dans la fourniture de polices personnalisées aux utilisateurs avec plus de polices préchargées sur les appareils, la possibilité de charger des polices personnalisées avec la règle de @font face et l’utilisation de services d’hébergement de polices. Les navigateurs Web ont également mis en place la prise en charge des polices variables, qui sont des fichiers de police uniques à partir desquels plusieurs polices peuvent être interpolées, offrant un haut degré de réglage et de personnalisation des polices.
Dans ce tutoriel, vous allez essayer des exemples de chargement de polices sur votre site Web. Vous utiliserez la pile de polices, un ordre de classement des polices en fonction de la disponibilité, pour utiliser les polices qui peuvent être installées sur l’appareil de l’utilisateur. Ensuite, vous utiliserez un service d’hébergement de polices, Google Fonts, pour trouver, sélectionner et charger des polices personnalisées sur votre page. Enfin, vous allez charger une famille de polices auto-hébergée à l’aide de la règle de @font-face, suivie d’une police variable auto-hébergée.
Déployez vos applications frontend à partir de GitHub à l’aide de DigitalOcean App Platform. Laissez DigitalOcean se concentrer sur la mise à l’échelle de votre application.
Conditions préalables
- Une compréhension des fonctionnalités de cascade et de spécificité de CSS, que vous pouvez obtenir en lisant Comment appliquer des styles CSS à HTML avec Cascade et Specificity.
- Connaissance des sélecteurs de type, des sélecteurs combinateurs et des groupes de sélecteurs, que vous pouvez trouver dans Comment sélectionner des éléments HTML à styliser avec CSS.
- Une compréhension des piles de polices et des propriétés de police dans CSS, que vous pouvez trouver dans le tutoriel Comment styliser des éléments de texte avec la police, la taille et la couleur en CSS.
- Un fichier HTML vide enregistré sur votre ordinateur local en tant que
index.htmlauquel vous pouvez accéder à partir de l’éditeur de texte et du navigateur Web de votre choix. Pour commencer, consultez notre tutoriel Comment configurer votre projet HTML, et suivez Comment utiliser et comprendre les éléments HTML pour obtenir des instructions sur la façon d’afficher votre HTML dans votre navigateur. Si vous débutez avec HTML, essayez toute la série Comment créer un site Web avec HTML.
Configuration du HTML et création de la pile de polices initiale
Le concept d’une pile de polices vient du début du Web, alors qu’il n’y avait que quelques polices fiables que l’on pouvait installer sur la majorité des ordinateurs. Il était souvent probable que la police ne soit pas disponible, de sorte que la pile de polices fournissait un ordre de polices que le navigateur pouvait tenter de trouver et de charger. Dans cette section, vous allez découvrir les principes d’une pile de polices résiliente et les options disponibles pour les polices sur les appareils modernes. Mais d’abord, vous allez créer un exemple de code HTML pour illustrer les polices.
Commencez par ouvrir index.html dans votre éditeur de texte. Ensuite, ajoutez le code HTML suivant au fichier :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
À l’intérieur de la balise <head> la première balise <meta> définit le jeu de caractères du fichier HTML. La deuxième balise < méta > définit la façon dont les appareils mobiles doivent afficher la page. Ensuite, la balise <title> donne son titre à la page. Enfin, la balise <link> fait référence au fichier CSS que vous utiliserez plus tard pour créer les styles de la page.
Ensuite, à l’intérieur de la balise <body>, ajoutez le contenu de la page. Ce contenu est connu sous le nom de contenu de remplissage de Cupcake Ipsum et il fournit du texte pour apparaître comme du contenu sans rien dire réellement. Le contenu du remplissage est mis en évidence dans le bloc de code suivant. Vous rencontrerez cette méthode de mise en surbrillance tout au long du tutoriel au fur et à mesure que le code est ajouté et modifié :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<main>
<header>
<div class="content-width">
<h1>Sweet strawberry cheesecake</h1>
<p><em>Sweet muffin bear claw</em> donut chupa chups liquorice tiramisu candy canes sweet.</p>
</div>
</header>
<div class="content-width">
<p>Chocolate shortbread caramels tootsie roll tiramisu sweet dessert apple pie fruitcake. <strong>Croissant icing chupa chups</strong> sweet roll cake tart fruitcake soufflé jujubes. Shortbread brownie tootsie roll ice cream pudding dessert marshmallow sesame snaps. Cake pie jujubes lemon drops sesame snaps soufflé cookie jujubes wafer. Caramels ice cream fruitcake pastry cheesecake chocolate tootsie roll cake marshmallow. Pie candy canes cupcake dragée bonbon fruitcake marzipan. Tootsie roll halvah bonbon cake muffin gummies. Bonbon cotton candy marzipan cake sesame snaps chupa chups donut dessert. Macaroon gummies macaroon biscuit chocolate carrot cake gummi bears.</p>
<h2>Donut candy canes cotton candy</h2>
<p><strong><em>Liquorice gingerbread tiramisu</em></strong> pie bonbon soufflé. Jujubes tootsie roll muffin gingerbread powder. Carrot cake halvah chocolate bar tart sugar plum sugar plum pastry. Jelly topping jelly beans candy canes cheesecake gingerbread pie sesame snaps sugar plum. Pie cheesecake pudding jelly brownie jelly beans halvah. Ice cream powder carrot cake bear claw cake cheesecake.</p>
<p><em>Jelly-o jelly-o jelly</em> lollipop croissant. Carrot cake tart danish macaroon dragée gingerbread. Sugar plum cotton candy biscuit <strong>fruitcake powder liquorice</strong>. Shortbread candy pie tart pudding. Sesame snaps bear claw tart tiramisu donut chocolate cake. Cheesecake tiramisu chocolate cake dessert dessert candy candy canes apple pie marshmallow. Sweet croissant pudding toffee tootsie roll gummies tart pastry pie. Candy apple pie cake wafer tootsie roll tart icing halvah.</p>
<h3>Gingerbread gummi bears</h3>
<p><em>Tiramisu sweet pastry</em> danish topping ice cream caramels. Tiramisu candy liquorice jelly-o marzipan candy canes cupcake topping. Gummi bears jujubes carrot cake shortbread sesame snaps marshmallow danish pudding cotton candy. <strong>Cake jujubes biscuit</strong> topping marzipan sweet roll apple pie bonbon. Bear claw donut bear claw bonbon caramels halvah gummi bears. Gummi bears apple pie jelly-o donut sesame snaps icing marzipan.</p>
<p><strong><em>Bonbon chupa chups</em></strong> donut dessert pudding. Sweet roll caramels dessert muffin croissant. Powder chocolate lollipop ice cream bonbon pie candy muffin cotton candy. Fruitcake topping chupa chups toffee jelly-o halvah. Candy soufflé toffee gummies fruitcake oat cake chocolate cake. Dessert cupcake cheesecake sweet roll bear claw. Marshmallow halvah bear claw biscuit dragée marzipan lemon drops jelly.</p>
</div>
</main>
</body>
</html>
Le contenu de remplissage contient un certain nombre d’éléments qui sont utilisés pour fournir différents styles de police. La balise <strong> mettra par défaut son contenu en gras, la balise <em> mettra son contenu en italique et les balises head augmenteront la taille de la police et mettront leur contenu en gras.
Ensuite, retournez à votre éditeur de texte et créez le fichier styles.css dans le même dossier que index.html. Il s’agit du fichier que vous avez référencé dans l’élément <head> de index.html. Dans le fichier styles.css, ajoutez le code suivant :
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
}
.content-width {
max-width: 70ch;
width: calc(100% - 4rem);
margin: 0 auto;
}
main {
margin-bottom: 4rem;
}
header {
margin-bottom: 4rem;
padding: 2rem 0;
background-color: hsl(280, 50%, 40%);
border-bottom: 4px solid hsl(300, 50%, 50%);
color: hsl(300, 50%, 90%);
}
header p {
color: hsl(300, 50%, 85%);
}
h1, h2, h3 {
margin: 0;
line-height: 1.25;
}
h2, h3 {
color: hsl(280, 50%, 40%)
}
Ces styles créent le style visuel général de la page. L’en-tête a un fond violet avec le h1 et le p à l’intérieur étant un violet clair. Les sélecteurs main et .content-width créent la mise en page de la page, tandis que les sélecteurs de corps et d’en-tête fournissent plusieurs styles typographiques en définissant les valeurs de hauteur de ligne, de couleur et de marge.
Enregistrez vos modifications dans styles.css, puis ouvrez votre navigateur Web. Ouvrez index.html dans le navigateur en faisant glisser le fichier dans la fenêtre du navigateur ou à l’aide de l’option Ouvrir un fichier du navigateur. Le navigateur affichera le code HTML et CSS pour produire une page comme l’image suivante :
Le texte du fichier index.html dans votre navigateur utilisera la police locale par défaut du navigateur. Dans la plupart des cas, il s’agira d’une police à empattement comme Times New Roman. La façon la plus performante de personnaliser les polices consiste à utiliser des polices déjà présentes sur l’ordinateur de l’utilisateur final. L’utilisation de polices locales dispense le navigateur de télécharger et de traiter des fichiers volumineux.
Aujourd’hui, il y a souvent plusieurs dizaines de polices locales parmi lesquelles choisir ; Celles-ci sont connues sous le nom de polices système. Microsoft et Apple tiennent tous deux une liste à jour des polices fournies avec leurs systèmes.
Pour commencer à utiliser les polices système préinstallées, revenez à styles.css dans votre éditeur de texte. Dans le sélecteur de corps, ajoutez une propriété font-family et faites de sa valeur une liste de polices séparées par des virgules appelée pile de polices :
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "PT Sans", Calibri, Tahoma, sans-serif;
}
...
Le navigateur tentera séquentiellement de charger les polices locales dans la pile de polices jusqu’à ce qu’elle réussisse. Pour cette pile de polices, la première police à essayer est « PT Sans », qui est entre guillemets car il s’agit d’un nom de police à plusieurs mots. PT Sans est une police de ParaType qui est préinstallée sur les systèmes d’exploitation Apple et qui est également disponible gratuitement sur Google Fonts. La police suivante est Calibri, suivie d’une autre virgule et de Tahoma. Calibri est une police de Microsoft qui est installée sur la version récente de Windows, et Tahoma est une autre police de Microsoft qui est présente sur les systèmes d’exploitation Apple depuis plus d’une décennie.
La police finale est la valeur générique espacée sans-serif. Si aucune des trois polices précédentes n’est disponible, le navigateur utilisera la police sans empattement par défaut du navigateur, telle que Helvetica ou Arial.
Enregistrez vos modifications dans styles.css puis actualisez-index.html dans votre navigateur. Votre système d’exploitation et les polices installées détermineront quelle police est rendue et comment elle est rendue. L’image suivante montre comment PT Sans apparaît comme police lorsqu’il est chargé dans Firefox sur macOS :
Une famille de polices se compose de toutes les variations de poids et de style d’une police donnée. Les familles peuvent inclure de nombreux poids et styles supplémentaires qui modifient l’affinage, l’épaisseur et l’inclinaison d’une police.
La propriété font-style détermine l’inclinaison de la police. La valeur est le plus souvent en italique, mais certaines polices prennent en charge la valeur oblique, qui accepte une valeur de degré facultative pour indiquer la pente de l’inclinaison.
La propriété font-weight a deux valeurs nommées définies : normal et bold, mais la manière la plus polyvalente et la plus prévisible de déterminer cette valeur est d’utiliser un nombre de poids. Les valeurs numériques de poids sont généralement définies par incréments de 100 de 100 à 900, 100 étant un poids mince et 900 étant un poids épais. Si le navigateur ne trouve pas de police correspondant au poids spécifié, il trouvera la taille disponible la plus proche.
Pour définir un nouveau style de police de base pour cette page tout au long du tutoriel, revenez à styles.css dans votre éditeur de texte. Créez ensuite un sélecteur d’élément pour chacun des éléments h1, h2, h3 et p. À l’intérieur de chaque sélecteur, ajoutez le CSS en surbrillance du bloc de code suivant pour augmenter la taille de la police et mettre l’accent sur les en-têtes :
...
h2, h3 {
color: hsl(280, 50%, 40%)
}
h1 {
font-size: 3rem;
font-weight: 100;
}
h2 {
font-size: 2rem;
font-weight: 200;
}
h3 {
font-size: 1.75rem;
font-style: italic;
font-weight: 200;
}
p {
font-size: 1.125rem;
}
Le h1 est ici défini sur une taille de police de 3rem, ce qui équivaut à 48px, avec un poids de police mince de 100. Ensuite, le h2 est défini à 2rem, ce qui équivaut à 32px, et un poids de police de 200. Ensuite, le h3 est défini sur le même poids de police et une taille de police légèrement plus petite que le h2, mais gagne une propriété de style de police supplémentaire définie sur italique. Enfin, le sélecteur d’élément p augmente la taille de police standard à 1,125rem, ce qui équivaut à 18px dans ce cas. Les ajustements apportés au style général de ce texte resteront les mêmes lorsque vous modifierez la police utilisée dans chaque section.
Enregistrez les modifications dans styles.css, puis retournez à votre navigateur et actualisez index.html. La taille globale du texte a augmenté, les styles de titre se distinguant davantage les uns des autres. L’image suivante montre comment cela apparaîtra dans le navigateur :
Dans cette section, vous avez utilisé la pile de polices pour charger une série de polices possibles sur la page dans un ordre classé. Vous avez également découvert les variations possibles d’une famille de polices avec les propriétés font-weight et font-style. Dans la section suivante, vous allez utiliser une police d’un service d’hébergement de polices.
Recherche et chargement d’un fichier de polices à partir d’un service hébergé
Les services de polices hébergées sont un moyen populaire et efficace de trouver et de fournir des polices personnalisées à un site Web. Des services tels que Google Fonts, Adobe Fonts (anciennement Typekit) et Typography.com fournissent une vaste bibliothèque de polices de haute qualité qu’un client téléchargera temporairement lors de l’affichage de votre page. Cela signifie que vous n’avez plus à vous soucier des polices qui se trouvent sur le système du client.
Chaque service d’hébergement de polices a son propre processus de chargement des polices et, dans de nombreux cas, il y a un coût associé. Pour cette section, vous trouverez et chargerez des polices du service de Google, car il héberge gratuitement des polices open source et à licence limitée.
Pour commencer, ouvrez fonts.google.com. Recherchez la police nommée « Open Sans » à l’aide de la barre de recherche en haut de la page. Les résultats de la recherche répertorient le terme correspondant, c’est-à-dire un lien qui vous mène à la page Google Fonts Open Sans. Sur cette page, il y a une liste de plusieurs styles de police. Chacune de ces combinaisons de poids et de style de police est un fichier de police unique que le navigateur téléchargera.
Remarque : Chaque font-weight et font-style devront être sélectionnés en fonction des besoins, au lieu de les sélectionner tous. Plus de polices sélectionnées signifie qu’il faut télécharger plus de polices, ce qui augmente le temps de chargement du site Web. Il est important de ne charger que les graisses et les styles de police utilisés dans votre conception.
Pour cette conception, sélectionnez Clair 300, Clair 300 italique, Normal 400, Normal 400 italique, Gras 700 et Gras 700 italique. L’image suivante montre à quoi ressemblera cette sélection dans Google Fonts :
Ensuite, copiez les balises <link> nécessaires pour charger les fichiers à partir du service Google Fonts. Pour ce faire, sélectionnez l’option <lien> au lieu de l’option @import comme moyen de charger les fichiers dans l’interface Google Fonts. Copiez la série de balises <lien> présentées. Ensuite, revenez à index.html dans votre éditeur de texte. Allez à l’intérieur de l’élément <head> et, après le chargement de la balise <link> styles.css, collez les balises <link> de Google Fonts. Le code HTML mis en surbrillance dans le bloc de code suivant indique où ajouter le code copié :
<!doctype html>
<html>
<head>
...
<link href="styles.css" rel="stylesheet" />
<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=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
...
</body>
</html>
Les deux premiers éléments <link> effectuent une tâche appelée préconnexion, qui indique au navigateur de donner la priorité à une connexion Web externe. À leur tour, ces deux éléments <link> préparent le navigateur à charger le fichier CSS et les fichiers de polices du troisième <link> dès que possible.
Maintenant que la police est prête pour que le navigateur puisse la charger sur la page, vous devez ensuite appliquer le style de police afin que le texte soit rendu avec cette police.
Enregistrez vos modifications dans index.html, puis revenez à styles.css dans votre éditeur de texte. Dans votre sélecteur de corps, allez dans la propriété font-family. Faites précéder la valeur du nom de la police « Open Sans » entre guillemets avant la police « PT Sans », suivie d’une virgule. Le CSS mis en surbrillance dans le bloc de code suivant indique où la nouvelle police est placée dans la pile de polices :
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "Open Sans", "PT Sans", Calibri, Tahoma, sans-serif;
}
...
En ajoutant Open Sans au début de la pile de polices, le navigateur reviendra à la police locale disponible suivante s’il n’est pas en mesure de charger les fichiers à partir de Google. Il est important de toujours disposer d’une pile de polices d’au moins deux, la dernière police de la pile étant sans-serif, serif, monospace ou une autre valeur nommée qui ressemble le plus à la police prévue.
Enregistrez vos modifications dans styles.css et ouvrez-index.html dans le navigateur Web. Le texte de la page s’affichera désormais à l’aide de la police Open Sans chargée à partir de Google Fonts. Le texte avec un poids de police défini sur 100 et 200 utilisera à la place 300 car c’est le plus proche disponible. L’image suivante illustre comment cela apparaîtra dans le navigateur :
Dans cette section, vous avez chargé une famille de polices à partir de Google Fonts. Vous avez appris que le poids et le style de chaque police proviennent d’un fichier différent chargé à partir du service et que le nombre de variations chargées peut avoir un impact sur les performances du site. Dans la section suivante, vous allez charger les polices en écrivant votre propre règle de @font-face pour remplir les fichiers de polices auto-hébergés.
Chargement d’une police auto-hébergée avec @font-face
Les polices auto-hébergées sont des fichiers de polices qui sont stockés sur votre serveur avec les autres composants Web, tels que les fichiers HTML et CSS. Une raison courante d’envisager l’auto-hébergement de vos fichiers de polices est lorsque vous souhaitez utiliser une police qui n’est pas fournie par un service d’hébergement. Lors de l’auto-hébergement, il y a plus de contrôle sur la façon dont les polices sont liées les unes aux autres et sur leur nom, que vous pouvez définir via les définitions des règles @font-face. Dans cette section, vous allez écrire vos propres règles de @font et charger une famille de polices sur votre page Web.
Pour cette section, vous devrez télécharger l’exemple de fichier zip contenant des polices open-source. Vous pouvez le télécharger via votre navigateur ou utiliser la commande curl suivante :
curl -sL https://assets.linux-console.net/articles/68060/fonts.zip -o fonts.zip
Une fois que vous avez téléchargé le fichier, extrayez le répertoire des polices contenu dans le fichier zip et placez-le dans le même répertoire que le fichier index.html et styles.css sur votre ordinateur. Sous Linux, vous pouvez le faire à partir de la ligne de commande avec la commande unzip suivante :
unzip fonts.zip
Ensuite, ouvrez-index.html dans votre éditeur de texte. Étant donné que vous allez charger une police locale à partir du fichier zip, vous pouvez supprimer le code de la police Google. Dans cette section, vous allez charger les fichiers de polices à partir de votre fichier styles.css existant. Assurez-vous que le contenu de votre élément <head> est configuré comme le bloc de code suivant :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
...
</body>
</html>
Enregistrez vos modifications dans index.html, puis ouvrez-styles.css dans votre éditeur de texte.
Vous pouvez utiliser la règle @font-face pour charger une police personnalisée sur une page Web. L’histoire du chargement de polices personnalisées a conduit à une méthode composée pour prendre en charge le plus grand nombre de navigateurs. Contrairement à d’autres règles at, comme @media ou @supports, la règle @font face n’a pas d’arguments supplémentaires. À l’intérieur du bloc de règles, seul un nombre défini de propriétés est accepté. Le plus important est font-family, qui décrit le nom que le navigateur utilisera pour référencer et charger les fichiers de polices appropriés. Ensuite, la propriété src fait référence à l’emplacement des fichiers de polices. Afin de prendre en charge les versions d’Internet Explorer antérieures à la version 9, deux propriétés src sont nécessaires, la première faisant uniquement référence au format de fichier de police .eot. La deuxième propriété src sera alors une liste de formats de fichiers de polices séparés par des virgules. La version du navigateur sélectionnera le format approprié qu’il prend en charge.
Pour commencer à utiliser la règle de @font face, ouvrez-styles.css dans votre éditeur de texte. En haut du fichier, avant le sélecteur de corps, créez la règle de @font-face suivante :
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
}
body {
...
}
...
À l’intérieur de cette règle, vous avez ajouté une propriété font-family avec la valeur « Fira Sans » entre guillemets. Étant donné que ce code définit une famille de polices globale, un seul nom de police doit être utilisé. La liste des formats de polices séparés par des virgules pour src est en deux parties. La première est l’url() qui, comme une propriété background-image, fournit le chemin vers le format de fichier sur le serveur. Ensuite, format() explique quel type de fichier est référencé, ce qui permet au navigateur de sélectionner le format pris en charge.
Le dossier fira à l’intérieur du dossier fonts contient quatre dossiers avec des formats de fichier spécifiques de la police Fira Sans. EOT est l’abréviation de Encapsulated OpenType, un format développé par Microsoft pour Internet Explorer afin de charger des polices personnalisées. TTF est l’abréviation de TrueType Font, et est un format de police plus ancien qui n’a pas été développé à l’origine pour le Web. Les formats WOFF et WOFF2 sont l’abréviation de Web Open Font Format, le « 2 » signifiant la deuxième version du format. La majorité des navigateurs modernes prennent en charge TTF, WOFF et WOFF2 de la même manière. Pour créer une règle à @font qui couvre le plus grand nombre de formats de navigateur possibles, vous avez fourni plusieurs sources pour votre police. L’EOT est référencé dans les deux propriétés src, car les versions 9 et ultérieures d’Internet Explorer utilisent le format séparé par des virgules à la place.
Maintenant que vous avez créé la règle @font-face pour Fira Sans, accédez à la propriété font-family dans le sélecteur de corps. Dans la valeur de la famille de polices, remplacez « Open Sans » par « Fira Sans » pour utiliser la police auto-hébergée sur votre page. La partie en surbrillance du bloc de code suivant illustre cette modification :
@font-face {
...
}
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "Fira Sans", "PT Sans", Calibri, Tahoma, sans-serif;
}
...
Même si les polices sont chargées à partir du même endroit que le fichier styles.css et index.html, il est important de conserver une pile de polices de remplacement. Il existe de nombreuses raisons inconnues pour lesquelles une police auto-hébergée peut ne pas se charger, et si le navigateur rencontre un problème, une sauvegarde suffisante permet de maintenir une esthétique similaire pour votre site.
Enregistrez vos modifications dans styles.css et ouvrez-index.html dans un navigateur Web. Notez que les versions en gras et en italique de la police ne semblent pas tout à fait correctes. En effet, dans la règle @font-face, seuls les fichiers de poids et de style de police normaux ont été chargés et utilisés. Lorsque le navigateur doit appliquer une épaisseur en gras ou un style italique à une police, mais qu’il ne dispose pas du fichier de police approprié, il crée la variation nécessaire. Cette forme modifiée d’une police est connue sous le nom de faux gras et faux italique. Le faux gras est créé en ajoutant un trait à la police, ce qui crée souvent un espacement plus large entre les caractères qui pourrait interférer avec la mise en page prévue. Le faux italique est créé en inclinant la police, qui n’utilise souvent pas l’espace aussi bien qu’un véritable italique.
L’image suivante montre comment les styles de faux gras, italique et gras italique apparaissent dans le navigateur :
Afin de fournir au navigateur les variantes appropriées d’une famille de polices, vous devez fournir plus de détails dans la règle de @font et vous devez créer d’autres règles pour charger des fichiers de variations supplémentaires.
Revenez à styles.css dans votre éditeur de texte. Dans la règle @font-face, ajoutez une propriété font-weight et une propriété font-style après la deuxième propriété src :
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
...
Ici, vous définissez la valeur des deux propriétés sur normal. Pour le poids de police, la valeur normale est équivalente à la valeur de poids numérique 400. Ces propriétés indiquent au navigateur d’appliquer ces fichiers de polices pour les variations normales. Ainsi, le fichier de police FiraSans-Regular sera utilisé lorsque le texte doit avoir un poids et un style normaux.
Ensuite, pour fournir les variations nécessaires pour corriger le faux gras et le faux italique, ajoutez d’autres règles @font pour référencer chaque combinaison police-poids et police-style :
/* Fira Sans Regular */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Italic.eot');
src: url('fonts/fira/eot/FiraSans-Italic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Italic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Italic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
/* Fira Sans Bold */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Bold.eot');
src: url('fonts/fira/eot/FiraSans-Bold.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Bold.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Bold.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-BoldItalic.eot');
src: url('fonts/fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-BoldItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
...
Au fur et à mesure que d’autres variations sont ajoutées, il est utile d’ajouter des commentaires pour identifier plus facilement le groupe de poids de police. Vous avez donc ajouté un commentaire CSS au-dessus de la première règle @font-face. Ensuite, sous la première règle, vous avez créé trois autres règles à @font pour les variantes italiques, gras et italiques en gras de la police.
Enregistrez ces mises à jour dans votre fichier styles.css, puis actualisez-index.html dans le navigateur. Votre navigateur est maintenant en train de charger toutes les variantes de la famille de polices fournie. L’image suivante présente les différences entre les versions fausse et vraie du gras, de l’italique et de l’italique gras :
Le vrai gras est beaucoup plus épais que le faux gras du navigateur, et le texte est plus rapproché, ce qui explique les traits de police plus épais. L’italique véritable est plus remarquable lorsque l’on compare le caractère a minuscule dans le mot « Italique ». La police change le style du caractère a lorsqu’elle est en italique. De plus, l’inclinaison de l’italique véritable est moindre que celle de l’italique fictif du navigateur.
Ensuite, il y a quelques variations de police supplémentaires à charger, car les éléments d’en-tête utilisent des versions plus légères de Fira Sans.
Revenez à styles.css dans votre éditeur de texte et créez quatre autres règles @font face au-dessus de la règle @font face de la version normale :
/* Fira Sans Thin */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Thin.eot');
src: url('fonts/fira/eot/FiraSans-Thin.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Thin.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Thin.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-ThinItalic.eot');
src: url('fonts/fira/eot/FiraSans-ThinItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-ThinItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-ThinItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
/* Fira Sans Light */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Light.eot');
src: url('fonts/fira/eot/FiraSans-Light.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Light.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Light.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Light.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-LightItalic.eot');
src: url('fonts/fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-LightItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-LightItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
...
Ces nouvelles règles chargent les variations Thin et Light de Fira Sans, mappées respectivement aux valeurs de 100 et 200 poids-police. Comme il n’existe pas de valeurs de mot pour ces tailles, vous avez remplacé les valeurs des propriétés standard et bold font-weight par leurs valeurs numériques.
Enregistrez ces modifications dans styles.css, puis revenez à votre navigateur et actualisez index.html. Les éléments d’en-tête utilisent désormais les variantes les plus minces de Fira Sans, comme le montre l’image suivante :
Dans cette section, vous avez chargé des fichiers de polices auto-hébergés avec des règles à @font face. Vous avez appris à quel point les faux caractères gras et italiques peuvent avoir un impact sur la présentation visuelle d’une police et comment lier de nombreux fichiers de police avec une valeur de famille de polices commune. Dans la dernière section, vous utiliserez une police variable, qui permet de nombreuses variations provenant d’un seul fichier de police.
Utilisation de polices variables
Les polices variables sont un ajout relativement nouveau aux options de la typographie Web. Alors que dans la section précédente, chaque poids et style de police devait être chargé à partir d’un fichier individuel, les polices variables contiennent des informations dans un seul fichier à partir duquel de nombreuses variations peuvent être calculées. Les polices variables peuvent augmenter les performances et offrir beaucoup plus de possibilités de conception qu’auparavant. Dans cette section, vous allez charger une police variable à l’aide de la règle de @font-face et ajuster l’affichage de la police pour trouver la bonne variation.
Pour commencer à utiliser des polices variables, ouvrez-styles.css dans votre éditeur de texte. Tout d’abord, supprimez toutes les règles à @font faces de la section précédente et remplacez-les par la nouvelle règle suivante :
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway.woff2') format('woff2');
font-style: normal;
font-weight: 300 800;
}
body {
...
La structure d’une police variable est identique à celle d’une règle standard à @font faces. Vous déclarez d’abord un nom de famille de polices, puis vous fournissez une liste de valeurs src, bien qu’avec des polices variables, un seul format soit nécessaire. La propriété font-style a été définie sur normal pour cette police. Une différence vient de la valeur font-weight. Au lieu de définir une valeur unique, une plage est écrite avec le poids le plus fin suivi du poids le plus épais. En définissant cette plage, le navigateur peut se préparer aux éventuels calculs d’écart qui se produiront. Ici, vous définissez la règle de police pour Raleway, avec une plage de poids de police de 300 à 400.
Ensuite, vous devrez établir Raleway dans la pile de polices. Supprimez « Fira Sans » du début de la pile de polices et remplacez-le par Raleway. Étant donné que le nom Raleway ne contient pas d’espaces, il n’a pas besoin d’être entre guillemets :
...
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: Raleway, "PT Sans", Calibri, Tahoma, sans-serif;
}
...
Enregistrez vos modifications dans styles.css et ouvrez-index.html dans votre navigateur Web. Le navigateur produit des poids de police réels au lieu de faux poids, mais ne traite pas correctement l’italique en raison d’un manque de style italique défini.
Pour configurer la version italique de la police variable Raleway, revenez à styles.css dans votre éditeur de texte. Sous la première règle à @font face, créez un ensemble de règles :
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway.woff2') format('woff2');
font-weight: 300 800;
font-style: normal;
}
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway-Italic.woff2') format('woff2');
font-weight: 300 800;
font-style: italic;
}
body {
...
}
...
Le src a changé son nom de fichier de police de Raleway.woff2 à Raleway-Italic.woff2, et la valeur font-style est maintenant en italique.
Enregistrez vos modifications dans styles.css et actualisez la page dans votre navigateur. Le navigateur affiche maintenant la version italique des différents poids de Raleway. L’image suivante montre la version mise à jour de la page avec un jeu complet de polices variables Raleway :
L’avantage d’utiliser des polices variables est que toute valeur numérique entière définie dans la plage font-weight est disponible. Alors que les poids de police standard sont incrémentés par des valeurs de 100, les poids de police variables peuvent être incrémentés par des valeurs aussi faibles que 1. Il s’agit d’une méthode permettant d’affiner la conception visuelle de la police d’une manière qui n’était pas possible auparavant.
Pour utiliser les valeurs de poids de la plage, revenez à styles.css dans votre éditeur de texte et apportez les modifications suivantes :
...
h1 {
font-size: 3rem;
font-weight: 350;
}
h2 {
font-size: 2rem;
font-weight: 570;
}
h3 {
font-size: 1.75rem;
font-style: italic;
font-weight: 450;
}
p {
font-size: 1.125rem;
}
strong {
font-weight: 600;
}
Pour le sélecteur h1, vous avez changé la valeur font-weight en 350. Ensuite, vous définissez la propriété h2 font-weight sur 570 et la propriété h3 sur 450. Enfin, vous avez créé une sélection d’élément fort avec une propriété font-weight définie sur 650.
Assurez-vous d’enregistrer vos modifications dans styles.css, puis de revenir à votre navigateur et d’actualiser index.html. Le navigateur affiche désormais différents poids de la police Raleway sur toute la page. L’image suivante montre comment cela apparaît dans le navigateur :
Dans cette dernière section, vous avez chargé et utilisé une police variable sur votre page Web. Une ou deux polices variables peuvent varier beaucoup plus qu’une douzaine de polices standard. Vous avez également appris à ajuster une police variable pour trouver la bonne variation pour vos besoins de conception à un degré différent d’auparavant.
Foire aux questions
1. Comment importer des polices personnalisées dans CSS ?
Pour importer des polices personnalisées dans CSS, utilisez la règle de @font face. Il vous permet de définir des polices personnalisées et de les utiliser dans vos feuilles de style. Voici un exemple rapide :
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Pour en savoir plus sur la règle @font-face, consultez ce guide sur CSS @font-face.
2. Comment utiliser des polices spéciales en CSS ?
Pour utiliser des polices spéciales, vous devez d’abord les charger à l’aide de @font-face ou les importer via un CDN comme Google Fonts ou Adobe Fonts. Après cela, appliquez la police à l’aide de la propriété font-family.
Exemple:
h1 {
font-family: 'Poppins', sans-serif;
font-size: 32px;
}
Si vous cherchez également à styliser des éléments de texte, ce guide sur Comment styliser des éléments de texte avec la police, la taille et la couleur en CSS vous sera peut-être utile.
3. Comment installer et utiliser des polices personnalisées ?
- Étape 1 : Téléchargez le fichier de police au format WOFF2, WOFF, TTF ou OTF.
- Étape 2 : Placez le fichier de police dans le répertoire fonts/ de votre projet.
- Étape 3 : Utilisez @font-face pour le définir et l’appliquer aux éléments de votre CSS.
Pour une technique avancée, consultez ce guide sur les polices variables CSS, qui explique comment ajuster dynamiquement le poids et les styles de police.
4. Comment importer une police TTF en CSS ?
Si vous utilisez un fichier .ttf (TrueType Font), vous pouvez l’inclure à l’aide de @font-face comme suit :
@font-face {
font-family: 'CustomFont';
src: url('fonts/CustomFont.ttf') format('truetype');
}
Cependant, pour une meilleure prise en charge du navigateur, il est recommandé d’utiliser WOFF ou WOFF2 au lieu de TTF.
5. Comment ajouter des styles personnalisés au CSS ?
Vous pouvez personnaliser les polices à l’aide de propriétés CSS telles que font-weight, font-style et letter-spacing.
Exemple:
p {
font-family: 'MyCustomFont', sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
}
Pour en savoir plus sur le style de texte, vous pouvez vous référer à ce tutoriel sur Comment styliser des éléments de texte avec la police, la taille et la couleur en CSS.
6. Comment optimiser les polices personnalisées pour un chargement plus rapide ?
- Utilisez le format WOFF2, car c’est le plus optimisé pour une utilisation sur le Web.
- Activer font-display : swap ; pour éviter le blocage du rendu.
- Hébergez vous-même les polices au lieu de vous appuyer sur des CDN externes pour éviter les problèmes de latence.
- Utilisez des polices variables pour réduire le nombre de fichiers de polices nécessaires.
7. Puis-je utiliser des polices personnalisées sans Google Fonts ?
Oui, vous pouvez héberger vous-même des polices personnalisées en téléchargeant les fichiers de polices et en utilisant @font-face. Cela vous donne un contrôle total sur les performances et la disponibilité des polices.
8. Quel format de fichier est le meilleur pour les polices Web ?
Le format de police recommandé pour le Web est WOFF2, car il offre le meilleur équilibre entre compression et qualité.
| Format | Avantages | Contre |
|---|---|---|
| WOFF2 | Idéal pour le web, hautement compressé | Prise en charge limitée dans les navigateurs très anciens |
| WOFF | Bonne solution de repli pour WOFF2 | Taille de fichier légèrement plus grande |
| TTF | Fonctionne sur toutes les plateformes | Non optimisé pour une utilisation sur le Web |
| FTO | Caractéristiques typographiques de haute qualité | Taille de fichier plus grande |
Conclusion
Les polices sont un élément clé de l’esthétique visuelle d’un design. Ce sont des actifs très recherchés qui aident un site Web à se démarquer d’un autre.
Tout au long de ce tutoriel, vous avez appris les principales façons dont les polices peuvent être utilisées sur un site Web. Vous avez utilisé des polices locales et une pile de polices pour indiquer au navigateur les polices à essayer de charger. Ensuite, vous avez utilisé un service d’hébergement de polices pour charger efficacement la police Open Sans à partir de Google Fonts. Ensuite, vous configurez votre propre série de règles @font et créez votre propre famille de polices auto-hébergées. Enfin, vous vous êtes appuyé sur ce que vous avez appris en chargeant vos propres polices pour utiliser des polices variables et essayer la polyvalence et les performances qu’elles offrent. N’oubliez pas qu’il est important de toujours avoir des polices de secours dans la pile de polices, qu’elles proviennent d’un service d’hébergement ou qu’elles soient auto-hébergées, car la police peut ne pas se charger pour des raisons inconnues.
Si vous souhaitez lire d’autres tutoriels CSS, essayez les autres tutoriels de la série Comment styliser HTML avec CSS.