Fiche N° 8 - Utiliser des "Webfonts"

par manu

Objectif : Mettre proprement des polices originales sur votre site, avec l’assurance qu’elles seront visibles sur tous les navigateurs (suffisamment récents) et tous les ordinateurs.


Installer des polices de la WebFont API de Google

Choisissez les polices que vous voudrez utiliser sur votre site en allant sur le site de la WebFont API.
Attention au jeu de caractères : certaines polices ne permettent que d’avoir des lettres majuscules, par exemple.
Attention aussi aux accents ou autres caractères "spéciaux".

Cliquez sur l’onglet "Use this font"

Editez le fichier de squelette inc-head.html

En fin de fichier, copiez-coller la ligne proposée par Google : par exemple avec la police Cabin Sketch, introduisez la ligne suivante :

  1. <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold' rel='stylesheet' type='text/css'>

Utiliser ces polices dans votre texte

Dans perso.css, vous pourrez alors introduire la ligne suivante pour que les titres apparaissent avec cette police : [1]

  1. h1,h2,h3 {
  2. font-family: 'Cabin Sketch', arial, serif;
  3. }

Par souci d’homogénéité, on peut aussi sélectionner cette police pour tout le site :

  1. body {
  2. font-family: 'Cabin Sketch', arial, serif;
  3. }

[1Là encore, Google vous aide en vous donnant le nom de police à insérer