Modifier la police d'affichage de votre CMS ou de votre site Internet
Que l'on utilise un système de gestion de contenu (CMS) tel que WordPress, Drupal, Spip, Dotclear, etc. ou que l'on monte soi-même ses pages Internet, la typographie utilisée a toujours son importance. D'ailleurs, on peut remarquer qu'il s'agit très souvent des quelques mêmes polices qui sont utilisées par l'écrasante majorité des sites Web (je ne parle pas, bien sûr, des sites utilisant un alphabet différent du nôtre qui disposent de leurs propres polices) : ??les familles Trebuchet, Trebuchet MS, Tahoma, Lucida Grande, Lucida Sans Unicode, Arial et Verdana de la faille générique sans-serif.
La large utilisation de ces polices provient d'un projet de Microsoft appelé « Core fonts for the Web » initié en 1996 et visant à standardiser l'utilisation des polices de caractères sur Internet, avec des familles de polices répondant à trois critères importants :
- être facilement lisibles sur un écran
- offrir une large gamme de caractères avec un nombre de familles de polices restreint
- supporter une internalisation exhaustive
Trois critères effectivement très importants pour assurer une lisibilité optimale et une large compatibilité.
De nos jours, il existe plusieurs solutions pour forcer l'utilisation d'une police donnée sur son site Web. Il est par ailleurs possible dans tout navigateur Internet digne de ce nom de choisir une police locale pour afficher tout site Internet ne faisant pas mention explicite de la police qu'il utilise, mais ce n'est pas ce qui nous intéresse ici.
Le nombre de sites Web utilisant une police disons inhabituelle va croissant. On peut d'ailleurs remarquer que certains font de mauvais choix, rendant la lecture et même parfois la navigation vectrices 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 utilisée le navigateur de l'utilisateur qui vient se balader sur votre site peut ne pas l'afficher correctement.
Comment utiliser une police donnée de façon à ce que ça marche pour tous les utilisateurs (ou presque) alors ? Eh bien, il existe principalement deux méthodes :
– la méthode cufón : basée sur Javascript/JSON, je dirais que son plus gros avantage est aussi son plus gros inconvénient, car elle repose sur Javascript. D'un côté, cela assure une très grande compatibilité avec les différents navigateurs, d'un autre côté il est bien évident qu'il faut que le navigateur supporte le Javascript pour qu'elle fonctionne. Or, bien que cela soit le cas par défaut dans la grande majorité des cas, on peut très bien avoir envie ou besoin de désactiver cette fonctionnalité intégrée et là, adieu le support des polices ! Par ailleurs, selon le type de police utilisé, le nombre de glyphes voulu, etc. on peut vite se retrouver avec un script assez lourd à charger. Ce n'est pas la méthode que je vais aborder ici.
– la méthode CSS : là, pas de Javascript, il s'agit de spécifier dans ses feuilles de style la faille de police à utiliser. Seule contrainte : il faut lier la police à son site, que ce soit localement ou en utilisant un répertoire de polices disponible sur Internet. Cette méthode, qui est selon moi celle à privilégier est plus légère, plus simple à mettre ne place et plus flexible que la précédente. Par contre, d'aucuns navigateurs peu civilisés se font un malin plaisir de mal interpréter certaines propriétés CSS, voire de les zapper purement et simplement (suivez mon regard…). Malgré cela, et parce que c'est au navigateur de s'adapter à Internet et pas l'inverse, voici comment spécifier l'utilisation d'une police de caractères donnée dans votre CMS ou sur votre site :
Sur beaucoup de CMS, le thème utilisé peut permettre de spécifier une police particulière. Par exemple, il en va ainsi du thème Suffusion que j'utilise sur mon installation WordPress :
Si vous ne disposez pas de ce type de réglage ou si comme moi vous ne trouvez pas votre bonheur dans la liste proposée, sachez qu'il existe des répertoires de polices en ligne tels que Font Squirrel ou le tout récent Google Font Directory que nous pouvons utiliser pour ajouter la définition de notre police au thème de notre CMS ou à notre site Web :
[box type="warning"] Les modifications présentées ci-après ne sauraient s'appliquer à tous les cas particuliers, il y a de fortes chances pour que vous ayez d'autres manipulations ou modifications à effectuer. Faites bien attention quand vous éditez des fichiers de votre CMS ou de votre site Web, et faites toujours une sauvegarde avant.[/box]
Pour les CMS, il s'agit d'éditer le fichier d'en-tête du thème : header.php pour Worpress, head.html pour Spip, ?_head.html pour Dotclear, 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 Ubuntu du répertoire de Google. Imaginons que je préfère faire appel à ma police localement et que j'utilise l'un des merveilleux kits @font-face fournis par Font Squirrel :
<link rel="stylesheet" href="ubuntustyle.css" type="text/css" charset="utf-8">
et le fichier ubuntustyle.css contiendra 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; }
Maintenant, il va falloir éditer les styles de notre CMS, c'est à dire très souvent le fichier style.css (WordPress et Dotclear) ou habillage.css (Spip), bref, le fichier de styles correspondant. Il va s'agir d'appliquer la nouvelle police aux éléments voulus, 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 voilà ! Il vous suffit de recharger vos pages pour apprécier la différence (et éventuellement de vider le cache si vous utilisez un système de cache).
Dans le cas où vous voulez appliquer cela à votre site web, la technique est la même. Si vous disposez d'un fichier d'en-tête qui s'applique à toutes les pages c'est exactement la même démarche. Si vous n'avez pas d'en-tête commun à toutes vos pages, voici 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 contenu du fichier ubuntustyle.css sera le même que présenté plus haut.
Vous pouvez bien sûr utiliser le répertoire de polices de Google par exemple si vous ne voulez ou pouvez pas accéder à des copies locales de la police choisie. La ligne 6 est dans ce cas
<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold' rel='stylesheet' type='text/css'>
Voici en substance comment intégrer une police de votre choix dans votre site Web ou votre CMS. Gardez quand même à l'esprit que la typographie du Web est un sujet vaste et complexe et que le choix d'une police d'affichage ne doit en aucun cas se faire à la légère. Évitez d'utiliser des familles de polices trop exotiques qui risqueraient de rendre votre site inintelligible, une police se doit d'être lisible avant d'être jolie, les deux n'allant pas toujours de pair, loin s'en faut !