#

> Intégrer une typo à votre site

Pour que votre site affiche votre typo même sur un poste ou elle n’est pas installée, il faut l’embarquer dans votre site internet : on appelle ça une « webfont« .

Pour ça il va falloir convertir vos fichiers ttf/otf en woff/woff2, les placer dans un dossier fonts/ de votre projet, et utiliser @font-face en css pour la déclarer.
Ensuite vous pourrez l’utiliser avec font-family:’ma-typo-super-top’;

Les étapes :

  • trouver vos fichiers ttf/otf
  • vous rendre sur transfonter.org (ou à la rigueur font-squirrel)
  • glisser votre typo (ou votre famille de typos) dans le bouton « Add fonts« 
  • cliquer sur « Convert » (et attendre un peu)
  • (cliquer sur « Preview » si vous voulez vérifier le résultat)
  • cliquer sur « Download » → ça vous télécharge un zip
  • ouvrir le zip et glisser son contenu dans le dossiers fonts/ de votre projet (si vous n’avez pas de dossier fonts/, et bien créez-le !)
  • (effacer le fichier html de démo)
  • renommer la feuille de style téléchargée, pour lui donner le même nom que votre typo
  • ouvrir la nouvelle feuille de style pour vérifier ou modifier le nom d’usage de la typo (le mot indiqué après font-family). Si c’est trop long vous pouvez le modifier; c’est ce mot-là qui servira à utiliser votre typo par la suite.

Pour finir il va falloir relier votre page html à cette nouvelle feuille de style.

  • dans le header html (entre <head> et </head>), ajouter :
    <link rel= »stylesheet » href= »fonts/ma-typo-super-top.css« >

Ca y est, vous pouvez utiliser la typo dans votre style.css habituel !
Par exemple :

h1 {
font-family: 'ma-typo-super-top', Helvetica, Arial;
font-weight: normal;
/* si votre typo est prévue en normal seulement, vu qu'un h1 est en bold par défaut */
}