Utiliser des typographies sur le web

Lorsque l'on publie du contenu sur le web, nous avons la possibilité de personnaliser les polices de caractères utilisées.

Les polices système

Il existe une famille informelle de polices appellées "polices systèmes". Ce sont les polices qui ont le plus de chance d'être installées sur la quasi-totalité des ordinateurs, quelque soit le système d'exploitation utilisé. On y trouve notamment :

• Arial
• Times New Roman
• Trebuchet
• Verdana
• Georgia
• Courier

Modifier la police

En CSS, la propriété permettant de changer la police de caractères est font-family

body {
  font-family: Arial;
}

Afin de s'assurer un certain contrôle sur la police affichée dans le cas où l'utilisateur n'aurait pas celle que nous voulons utiliser, il convient de lister des polices alternatives. On termine généralement en utilisant un mot-clé générique définissant la famille de police souhaitée.

body {
  font-family: Helvetica, Arial, sans-serif;
}

Les polices personnalisées

L'intérêt des polices web vient surtout de la possibilité d'utiliser sa (ou ses) propre police.

Choisir une police

La première étape est de choisir une police adaptée au projet. Il existe de nombreux sites proposant des polices gratuites à télécharger. Je vous recommande Font Squirrel ou Google fonts.

Préparer la police

Un fichier de police sera généralement au format .otf ou .ttf. Ces formats, bien que compatibles, ne sont pas adaptés pour une utilisation web. Il convient de les convertir au format .woff2. Vous pouvez le faire grâce à des outils en ligne tels que Transfonter.

Il est aussi possible de supprimer les caractères inutilisés dans le fichier de police (comme les alphabets non latin) afin de réduire le poids du fichier.

Importer la police

Avant de pouvoir utiliser notre police personnalisée, nous devons la rendre disponible sur notre site web. Cela se passe dans le fichier CSS, grâce à la déclaration @font-face.

@font-face {
  font-family: "Luciole"; // on définit le nom de la police
  src: url("../fonts/webfonts/Luciole-Regular.woff2") format("woff2"); // chemin vers le fichier .woff2
  font-weight: normal; // graisse de la police
  font-style: normal; // style de la police
  font-display: swap; // stratégie de chargement de la police
}

Utiliser la police

Il ne reste plus qu'à indiquer aux éléments concernés qu'ils doivent utiliser notre police personnalisée !

Attention

N'oubliez pas les polices de secours 😉

h1,
h2,
h3 {
  font-family: "Luciole", Arial, sans-serif;
}