Après quelques années d’expérimentation incertaines, les pages web se sont enfin doté de la possibilité d’afficher des polices de caractères nombreuses et variées.
La solution : la méthode CSS @font-face. Cette solution est simple et permettra un affichage correct de votre page HTML.
Formats et compatibilité
Nous voyons dans ce tableau que nous avons besoin d’un grands nombre de formats de polices de caractères différents si nous voulons l’afficher correctement dans les navigateurs les plus utilisés. Avant même d’écrire des règles CSS, nous aurons besoin de convertir les fichiers de polices.
Au moins 4 type de fichiers différents. Comment faire quand je ne dispose sur mon ordinateur que d’un fichier .ttf ou .otf ? Il y a les convertisseurs.
1 – Concertisseur en ligne : @font-face kit Generator de Font Squirrel
Avec ce générateur, tout ce que vous avez à faire est de téléverser votre fichier sur le site. Après quelques instants, tous les fichiers seront généré, y compris une feuille de style basique et un fichier HTML.
2 – Les logiciels convertisseurs offline
En cas de panne d’internet 3 logiciels existent (payants).
Simple, pas cher, ne fait qu’une chose mais la fait très bien.
Très puissant, il convertit tous les formats de fichiers vers tous types de formats, y compris webfonts. Cher.
La même chose que Transtype, en moins cher. L’interface est cependant moins agréable et claire.
Suite à l’utilisation de la méthode font-face, plusieurs services internet se sont créés. Ils proposent l’inclusion de webfonts sur les sites internet que vous développez. Sans avoir à télécharger quoi que ce soit, l’ajout de quelques lignes de codes permettent d’afficher les polices de caractères choisies dans vos pages HTML. Parmi ceux-ci, en version payante : TypeKit, Typotheque, Fonts Live, Kernest. En semi-payant (quelques polices gratuites, à chercher) : MyFonts, Fontsquirrel. En gratuit : Google Fonts (attention il faut bien trier, peu de familles entières réellement intéressantes).
HTML, CSS, @font-face
La plupart du temps nous n’auront pas à écrire ces lignes. Les différents générateurs de webfonts, produisent également la méthode @font-face correspondante, il ne vous restera plus qu’à la copier-coller dans votre feuille de style personnelle.. Il faudra par contre être attentif au chemins relatifs des fichiers.
Voici un code de méthode @font-face complet en ce qui concerne les appels des fichiers de polices de caractère :
Les différents formats de polices de caractères doivent apparaitre dans cet ordre dans la feuille de style :
-
eot -
woff -
ttf / otf -
svg
Nous remarquerons le chemin vers le dossier ‘fonts’ (par exemple : url(‘fonts/chunkfire.ttf’). Il implique que les fichiers de polices de caractères sont dans un dossier ‘fonts’ situé à côté du fichier .css . Si la feuille de style est elle même dans un dossier ‘css’, voici l’arborescence correspondante à notre projet.
J’INSISTE sur ces questions de chemin. La plupart du temps les erreurs viennent soit d’une incompréhension de ces chemins, soit d’un manque d’attention…
Si par exemple nous voulons assigner cette police de caractères aux éléments < h1 > de la page HTML, nous ajoutons cette propriété au sélecteur h1 dans la feuille de style. Nous reprenons le nom de famille de la police de caractère de la déclaration @font-face, à savoir : ChunkFiveRegular. Ce qui donne :
Nous ajoutons sans-serif à la déclaration, pour prévoir une police de substitution, même, si malgré tous nos efforts, le navigateur ne parvient pas à lire la police.
Donc, voici les différentes lignes de codes (HTML, CSS) et leur résultat dans le navigateur :
Les fichiers de codes d’exemple sont téléchargeables à cette URL
Pour aller plus loin
Un bon article sur codrops synthétisant les bonnes pratiques du font-face et de la typographie responsive.