Web fonts

20/09/2022
[←] Retour

Web fonts

Souvent on aimerait utiliser des polices de caractère specifique sur notre projet. Sur le web on peut pas garantir que chaque utilisateur a la même police installé sur son ordinateur, donc on est obligé de l'inclure dans nos fichiers du projet.

font-family

Les polices appliquées à votre HTML peuvent être contrôlées à l'aide de la propriété font-family. Celle-ci prend un ou plusieurs noms de famille de polices. Lorsqu'il affiche une page Web, un navigateur parcourt une liste de valeurs de famille de polices jusqu'à ce qu'il trouve une police disponible sur le système sur lequel il fonctionne :

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

Fichier

D'abord il faut trouver la fichier de votre police. C'est égal si le format est OTF, WOFF, WOFF2 ou TTF.

C'est important de copier le fichier et de placer dans le dossier de votre projet.

Si vous voulez utiliser plusieurs graisses, il faut rajouter le fichiers correspondents dans votre dossier.

@font-face

Tout d'abord, vous avez un ensemble de règles @font-face au début du CSS, qui spécifie le ou les fichiers de police à télécharger :

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}
COPY

En dessous, vous utilisez le nom de la famille de polices spécifié dans @font-face pour appliquer votre police personnalisée à tout ce que vous voulez, comme d'habitude :

p {
  font-family: "myFont", serif;
}
COPY

Et voila, c'est tout!

Verifier que vous avez les droits d'utiliser la police de caractère en question avant de mettre votre site en ligne.