font-face

Typographie et CSS : @font-face

Après quelques années d’expérimentation incer­taines, les pages web se sont enfin doté de la pos­si­bi­lité d’afficher des polices de carac­tères nom­breuses et variées.

La solu­tion : la méthode CSS @font-face. Cette solu­tion est simple et per­met­tra un affi­chage cor­rect de votre page HTML.

For­mats et compatibilité

Navigateurs et formats de polices de caractères compaibles

Navi­ga­teurs et for­mats de polices de carac­tères compaibles

Nous voyons dans ce tableau que nous avons besoin d’un grands nombre de for­mats de polices de carac­tères dif­fé­rents si nous vou­lons l’afficher cor­rec­te­ment dans les navi­ga­teurs les plus uti­li­sés. Avant même d’écrire des règles CSS, nous aurons besoin de conver­tir les fichiers de polices.

Au moins 4 type de fichiers dif­fé­rents. Com­ment faire quand je ne dis­pose sur mon ordi­na­teur que d’un fichier .ttf ou .otf ? Il y a les convertisseurs.

1 – Concer­tis­seur en ligne : @font-face kit Gene­ra­tor de Font Squir­rel

02-03_font-face_generator

Font-face kit gene­ra­tor de Font Squirrel

Avec ce géné­ra­teur, tout ce que vous avez à faire est de télé­ver­ser votre fichier sur le site. Après quelques ins­tants, tous les fichiers seront généré, y com­pris une feuille de style basique et un fichier HTML.

2 – Les logi­ciels conver­tis­seurs offline

En cas de panne d’internet 3 logi­ciels existent (payants).

Font­prep

screen-ed2fc2e8dbce027f4bed00cf44609390

Simple, pas cher, ne fait qu’une chose mais la fait très bien.

Trans­type 4

transtype

Très puis­sant, il conver­tit tous les for­mats de fichiers vers tous types de for­mats, y com­pris web­fonts. Cher.

FontXchange

fontxchange

La même chose que Trans­type, en moins cher. L’interface est cepen­dant moins agréable et claire.

Suite à l’utilisation de la méthode font-face, plu­sieurs ser­vices inter­net se sont créés. Ils pro­posent l’inclusion de web­fonts sur les sites inter­net que vous déve­lop­pez. Sans avoir à télé­char­ger quoi que ce soit, l’ajout de quelques lignes de codes per­mettent d’afficher les polices de carac­tères choi­sies dans vos pages HTML. Parmi ceux-ci, en ver­sion payante : Type­Kit, Typo­theque, Fonts Live, Ker­nest. En semi-payant (quelques polices gra­tuites, à cher­cher) : MyFonts, Fonts­quir­rel. En gra­tuit : Google Fonts (atten­tion il faut bien trier, peu de familles entières réel­le­ment intéressantes).

HTML, CSS, @font-face

La plu­part du temps nous n’auront pas à écrire ces lignes. Les dif­fé­rents géné­ra­teurs de web­fonts, pro­duisent éga­le­ment la méthode @font-face cor­res­pon­dante, il ne vous res­tera plus qu’à la copier-coller dans votre feuille de style per­son­nelle.. Il fau­dra par contre être atten­tif au che­mins rela­tifs des fichiers.

Voici un code de méthode @font-face com­plet en ce qui concerne les appels des fichiers de polices de caractère :

font-face-css

Les dif­fé­rents for­mats de polices de carac­tères doivent appa­raitre dans cet ordre dans la feuille de style :

  1. eot
  2. woff
  3. ttf / otf
  4. svg

Nous remar­que­rons le che­min vers le dos­sier ‘fonts’ (par exemple : url(‘fonts/chunkfire.ttf’). Il implique que les fichiers de polices de carac­tères sont dans un dos­sier ‘fonts’ situé à côté du fichier .css . Si la feuille de style est elle même dans un dos­sier ‘css’, voici l’arborescence cor­res­pon­dante à notre projet.

fichiers-fonts-css-html

J’INSISTE sur ces ques­tions de che­min. La plu­part du temps les erreurs viennent soit d’une incom­pré­hen­sion de ces che­mins, soit d’un manque d’attention…

Si par exemple nous vou­lons assi­gner cette police de carac­tères aux élé­ments < h1 > de la page HTML, nous ajou­tons cette pro­priété au sélec­teur h1 dans la feuille de style. Nous repre­nons le nom de famille de la police de carac­tère de la décla­ra­tion @font-face, à savoir : Chunk­Fi­ve­Re­gu­lar. Ce qui donne :

font-face-css-declaration

Nous ajou­tons sans-serif à la décla­ra­tion, pour pré­voir une police de sub­sti­tu­tion, même, si mal­gré tous nos efforts, le navi­ga­teur ne par­vient pas à lire la police.

Donc, voici les dif­fé­rentes lignes de codes (HTML, CSS) et leur résul­tat dans le navigateur :

font-face-resultat

Les fichiers de codes d’exemple sont télé­char­geables à cette URL

Pour aller plus loin

Un bon article sur codrops syn­thé­ti­sant les bonnes pra­tiques du font-face et de la typo­gra­phie responsive.

Lire l’article

0