Modifier la police d'affichage de votre CMS ou de votre site Internet

Par Jikan, 21 janvier 2011 | Informatique, Webdev | 0 Commentaire

Que l'on uti­lise un sys­tème de ges­tion de conte­nu (CMS) tel que Word­Press, Dru­pal, Spip, Dot­clear, etc. ou que l'on monte soi-même ses pages Inter­net, la typo­gra­phie uti­li­sée a tou­jours son impor­tance. D'ailleurs, on peut remar­quer qu'il s'agit très sou­vent des quelques mêmes polices qui sont uti­li­sées par l'écrasante majo­ri­té des sites Web (je ne parle pas, bien sûr, des sites uti­li­sant un alpha­bet dif­fé­rent du nôtre qui dis­posent de leurs propres polices) : ??les familles Tre­bu­chet, Tre­bu­chet MS, Taho­ma, Luci­da Grande, Luci­da Sans Uni­code, Arial et Ver­da­na de la faille géné­rique sans-serif.

La large uti­li­sa­tion de ces polices pro­vient d'un pro­jet de Micro­soft appe­lé « Core fonts for the Web » ini­tié en 1996 et visant à stan­dar­di­ser l'utilisation des polices de carac­tères sur Inter­net, avec des familles de polices répon­dant à trois cri­tères importants :

• être faci­le­ment lisibles sur un écran
• offrir une large gamme de carac­tères avec un nombre de familles de polices restreint
• sup­por­ter une inter­na­li­sa­tion exhaustive

Trois cri­tères effec­ti­ve­ment très impor­tants pour assu­rer une lisi­bi­li­té opti­male et une large compatibilité.

De nos jours, il existe plu­sieurs solu­tions pour for­cer l'utilisation d'une police don­née sur son site Web. Il est par ailleurs pos­sible dans tout navi­ga­teur Inter­net digne de ce nom de choi­sir une police locale pour affi­cher tout site Inter­net ne fai­sant pas men­tion expli­cite de la police qu'il uti­lise, mais ce n'est pas ce qui nous inté­resse ici.

Le nombre de sites Web uti­li­sant une police disons inha­bi­tuelle va crois­sant. On peut d'ailleurs remar­quer que cer­tains font de mau­vais choix, ren­dant la lec­ture et même par­fois la navi­ga­tion vec­trices de sérieux maux de tête : ce n'est pas parce qu'une police est jolie qu'elle est lisible, et selon la méthode uti­li­sée le navi­ga­teur de l'utilisateur qui vient se bala­der sur votre site peut ne pas l'afficher correctement.

Com­ment uti­li­ser une police don­née de façon à ce que ça marche pour tous les uti­li­sa­teurs (ou presque) alors ? Eh bien, il existe prin­ci­pa­le­ment deux méthodes :

– la méthode cufón : basée sur Javascript/JSON, je dirais que son plus gros avan­tage est aus­si son plus gros incon­vé­nient, car elle repose sur Javas­cript. D'un côté, cela assure une très grande com­pa­ti­bi­li­té avec les dif­fé­rents navi­ga­teurs, d'un autre côté il est bien évident qu'il faut que le navi­ga­teur sup­porte le Javas­cript pour qu'elle fonc­tionne. Or, bien que cela soit le cas par défaut dans la grande majo­ri­té des cas, on peut très bien avoir envie ou besoin de désac­ti­ver cette fonc­tion­na­li­té inté­grée et là, adieu le sup­port des polices ! Par ailleurs, selon le type de police uti­li­sé, le nombre de glyphes vou­lu, etc. on peut vite se retrou­ver avec un script assez lourd à char­ger. Ce n'est pas la méthode que je vais abor­der ici.

– la méthode CSS : là, pas de Javas­cript, il s'agit de spé­ci­fier dans ses feuilles de style la faille de police à uti­li­ser. Seule contrainte : il faut lier la police à son site, que ce soit loca­le­ment ou en uti­li­sant un réper­toire de polices dis­po­nible sur Inter­net. Cette méthode, qui est selon moi celle à pri­vi­lé­gier est plus légère, plus simple à mettre ne place et plus flexible que la pré­cé­dente. Par contre, d'aucuns navi­ga­teurs peu civi­li­sés se font un malin plai­sir de mal inter­pré­ter cer­taines pro­prié­tés CSS, voire de les zap­per pure­ment et sim­ple­ment (sui­vez mon regard…). Mal­gré cela, et parce que c'est au navi­ga­teur de s'adapter à Inter­net et pas l'inverse, voi­ci com­ment spé­ci­fier l'utilisation d'une police de carac­tères don­née dans votre CMS ou sur votre site :

Sur beau­coup de CMS, le thème uti­li­sé peut per­mettre de spé­ci­fier une police par­ti­cu­lière. Par exemple, il en va ain­si du thème Suf­fu­sion que j'utilise sur mon ins­tal­la­tion WordPress :

Si vous ne dis­po­sez pas de ce type de réglage ou si comme moi vous ne trou­vez pas votre bon­heur dans la liste pro­po­sée, sachez qu'il existe des réper­toires de polices en ligne tels que Font Squir­rel ou le tout récent Google Font Direc­to­ry que nous pou­vons uti­li­ser pour ajou­ter la défi­ni­tion de notre police au thème de notre CMS ou à notre site Web :
[box type="warning"] Les modi­fi­ca­tions pré­sen­tées ci-après ne sau­raient s'appliquer à tous les cas par­ti­cu­liers, il y a de fortes chances pour que vous ayez d'autres mani­pu­la­tions ou modi­fi­ca­tions à effec­tuer. Faites bien atten­tion quand vous édi­tez des fichiers de votre CMS ou de votre site Web, et faites tou­jours une sau­ve­garde avant.[/box]
Pour les CMS, il s'agit d'éditer le fichier d'en-tête du thème : header.php pour Wor­press, head.html pour Spip, ?_head.html pour Dot­clear, etc. et d'ajouter la ligne suivante :

<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold' rel='stylesheet' type='text/css'>

Ici, j'utilise la police Ubun­tu du réper­toire de Google. Ima­gi­nons que je pré­fère faire appel à ma police loca­le­ment et que j'utilise l'un des mer­veilleux kits @font-face four­nis par Font Squir­rel :

<link rel="stylesheet" href="ubuntustyle.css" type="text/css" charset="utf-8">

et le fichier ubuntustyle.css contien­dra ceci :

@font-face {
font-family: 'UbuntuRegular';
src: url('Ubuntu-R-webfont.eot');
src: local('?'), url('Ubuntu-R-webfont.woff') format('woff'), url('Ubuntu-R-webfont.ttf') format('truetype'), url('Ubuntu-R-webfont.svg#webfont5QrTZHwg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuItalic';
src: url('Ubuntu-I-webfont.eot');
src: local('?'), url('Ubuntu-I-webfont.woff') format('woff'), url('Ubuntu-I-webfont.ttf') format('truetype'), url('Ubuntu-I-webfont.svg#webfontwdgWd3TL') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuBold';
src: url('Ubuntu-B-webfont.eot');
src: local('?'), url('Ubuntu-B-webfont.woff') format('woff'), url('Ubuntu-B-webfont.ttf') format('truetype'), url('Ubuntu-B-webfont.svg#webfontCKhwRblf') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuBoldItalic';
src: url('Ubuntu-BI-webfont.eot');
src: local('?'), url('Ubuntu-BI-webfont.woff') format('woff'), url('Ubuntu-BI-webfont.ttf') format('truetype'), url('Ubuntu-BI-webfont.svg#webfontLmVyebAO') format('svg');
font-weight: normal;
font-style: normal;
}

Main­te­nant, il va fal­loir édi­ter les styles de notre CMS, c'est à dire très sou­vent le fichier style.css (Word­Press et Dot­clear) ou habillage.css (Spip), bref, le fichier de styles cor­res­pon­dant. Il va s'agir d'appliquer la nou­velle police aux élé­ments vou­lus, comme par exemple :

h1, h2, h3, h4, h5, h6 {
font-family: Ubuntu, Tahoma, Verdana, Arial, sans-serif;
line-height:130%;
}
body {
font-family: Ubuntu, Tahoma, Verdana, Arial, sans-serif;
line-height:130%;
}

ou encore

h1.fontface {
font: 60px/68px 'UbuntuRegular', Arial, sans-serif;
letter-spacing: 0;
}
p.style1 {
font: 18px/27px 'UbuntuRegular', Arial, sans-serif;
}
p.style2 {
font: 18px/27px 'UbuntuItalic', Arial, sans-serif;
}
p.style3 {
font: 18px/27px 'UbuntuBold', Arial, sans-serif;
}
p.style4 {
font: 18px/27px 'UbuntuBoldItalic', Arial, sans-serif;
}

Et voi­là ! Il vous suf­fit de rechar­ger vos pages pour appré­cier la dif­fé­rence (et éven­tuel­le­ment de vider le cache si vous uti­li­sez un sys­tème de cache).

Dans le cas où vous vou­lez appli­quer cela à votre site web, la tech­nique est la même. Si vous dis­po­sez d'un fichier d'en-tête qui s'applique à toutes les pages c'est exac­te­ment la même démarche. Si vous n'avez pas d'en-tête com­mun à toutes vos pages, voi­ci un exemple de modèle de page inté­grant votre police :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Font Face Demo</title>
<link rel="stylesheet" href="ubuntustyle.css" type="text/css" charset="utf-8">
<style type="text/css" media="screen">
h1.fontface {
font: 60px/68px 'UbuntuRegular', Arial, sans-serif;
letter-spacing: 0;
}
p.style1 {
font: 18px/27px 'UbuntuRegular', Arial, sans-serif;
}
p.style2 {
font: 18px/27px 'UbuntuItalic', Arial, sans-serif;
}
p.style3 {
font: 18px/27px 'UbuntuBold', Arial, sans-serif;
}
p.style4 {
font: 18px/27px 'UbuntuBoldItalic', Arial, sans-serif;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>

Le conte­nu du fichier ubuntustyle.css sera le même que pré­sen­té plus haut.

Vous pou­vez bien sûr uti­li­ser le réper­toire de polices de Google par exemple si vous ne vou­lez ou pou­vez pas accé­der à des copies locales de la police choi­sie. La ligne 6 est dans ce cas

<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold' rel='stylesheet' type='text/css'>

Voi­ci en sub­stance com­ment inté­grer une police de votre choix dans votre site Web ou votre CMS. Gar­dez quand même à l'esprit que la typo­gra­phie du Web est un sujet vaste et com­plexe et que le choix d'une police d'affichage ne doit en aucun cas se faire à la légère. Évi­tez d'utiliser des familles de polices trop exo­tiques qui ris­que­raient de rendre votre site inin­tel­li­gible, une police se doit d'être lisible avant d'être jolie, les deux n'allant pas tou­jours de pair, loin s'en faut !