You are currently viewing Polices personnalisées avec font-face

Comment déclarer des polices personnalisées avec font-face (règle CSS @font-face) ? Cette règle CSS permet de définir les polices de caractères à utiliser pour styliser et afficher les textes de votre page web. Pour que cette police puisse être chargée depuis un serveur distant, voici le mode d’emploi. La syntaxe “règle + propriété” est ajoutée directement dans votre fichier CSS. Dans cet exemple, nous téléchargeons la police de caractères “Smiley” sur Dafont.com.

Polices personnalisées avec font-face : mode d’emploi

  • Choisir la police de caractères TrueType “Smiley” sur dafont.com
  • Télécharger la police de caractères “Smiley”
  • Dézipper le dossier Smiley.zip : extraire tout. L’extension du fichier est .ttf (TrueType Font)
  • Créer un dossier src à la racine : fonts
  • Glisser le fichier .ttf dans le dossier fonts
  • Supprimer les majuscules et les espaces dans le nom du fichier .ttf
  • Déclarer la police  de caractères dans le fichier CSS avec la syntaxe :
    @font-face {
    font-family: “smiley”;
    src: url(“../fonts/smiley.ttf”) format(“TrueType”);
    }
  • Redéfinir le sélecteur CSS qui utilise la police personnalisée. Exemple : l’entête h1
    h1 {
    font-family: “smiley”, arial, sans-serif;
    }