Le design d’un site est important et il peut se jouer sur des détails comme une police de caractères. Les polices standard (Arial, Times New Roman, Verdana, …) sont peu nombreuses et communes. CSS apporte la possibilité d’utiliser des polices web (web fonts) afin de personnaliser votre site. Par exemple, mon blog utilise la police ‘Amaranth’ pour les titres (h1 à h6). Voyons comment les utiliser.
Il faut savoir que la possibilité d’utiliser des polices web a été apportée par la version 2.0 de CSS. Malheureusement, aucun consensus n’ayant été trouvé entre les navigateurs et les fondeurs, en ajoutant le poids de ces fonts, trop important pour l’époque (on était encore au modem 56K à l’époque 🙂 ), cette fonctionnalité a été supprimée de CSS 2.1.
Une des pratiques courantes consiste alors à utiliser une image contenant le texte écrit avec la police.
CSS3 réintroduit cette fontionnalité avec le module CSS Fonts
Présentation @font-face
Syntaxe
Dans la théorie, l’utilisation des web fonts est simple. Voici la déclaration d’une police qu’on appelera MaFont. Cette déclaration se fait via l’utilisation de @font-face qui permet d’indiquer la déclaration d’une police.
/* Déclaration de la police */
@font-face {
font-family: MaFont;
src: local("MaFont"), url('MaFont.ttf');
}
/* Utilisation de la police */
h1 {
/*Utilisation de MaFont par défaut*/
font-family: MaFont, Helvetica, Arial, sans-serif;
}
Voici les principaux attributs possible :
- font-family : Il permet de définir le nom de la police que vous utiliserez dans votre css
- src : l’attribut qui permet de définir ou récupérer la police. Il est possible de déclarer plusieurs sources afin de définir un ordre d’utilisation : local permet d’indiquer que l’on souhaite utiliser la police si elle est disponible sur l’ordinateur de l’utilisateur et url permet d’indiquer l’url de la police à utiliser. Bien entendu, on privilégiera toujours l’utilisation d’une police locale qui ne nécessite pas le téléchargement du fichier de police.
- font-weight : l’ attribut permet de définir le « poids » de la police (normal, bold, …)
- font-style : l’attribut permet de définir le style de la police (normal, italic, …)
- font-size : la taille de la police
On peut voir que la définition d’une police web est assez aisée. Dans la pratique, il existe différents format de police qui rendent la définition d’une police plus complexe.
Différents format de police
En effet, il serait trop simple de n’avoir qu’un seul type de format de police pour le web. Il en existe 4 principaux :
- le format SVG (.svg)
- les formats TrueType et OpenType (.ttf, .otf)
- le format Embedded OpenType (.eot)
- Le format de police WOFF (.woff) : le petit dernier spécialement conçu pour le web, proposé par Mozilla
Bien entendu, les navigateurs ne supportent pas tous les même format de police (compatibilité des polices suivant les navigateurs).
Pour en savoir plus sur les format de police, je vous invite à lire
cet article sur le site typographisme.net
Ainsi la syntaxe de définition d’une police web prend en compte cette multitude de format de police et permet de définir le type de police lors de l’ajout d’une source de type url avec l’attribut format.
Voici donc la déclaration mise à jour en spécifiant le format de notre police :
/* Déclaration de la police */
@font-face {
font-family: MaFont;
src: local("MaFont"), url('MaFont.ttf') format('truetype');
}
Afin que votre site ait le même rendu dans les différents navigateurs, il va falloir déclarer les polices dans les différents format afin d’assurer la compatibilité avec les formats de police.
On obtient donc maintenant une syntaxe du type :
@font-face{
font-family : "maFont";
src : local("MaFont"),
url('maFont.eot?') format('eot'),
url('maFont.woff') format('woff'),
url('maFont.svg#svgFontName') format('svg'),
url('maFont.ttf') format('truetype');
}
L’attribut format permet au navigateur de connaitre le format sans avoir besoin de télécharger la police. Si le navigateur ne supporte pas le format, la fichier de police ne sera pas téléchargé.
LA bonne syntaxe à adopter
Certains navigateurs ont des problèmes avec la syntaxe (utilisation de local() sous Android, non compréhension de la syntaxe CSS3 pour IE, …). L’équipe du site fontspring.com a trouver LA syntaxe à utiliser pour être compatible sur tout les navigateurs. La voici :
@font-face {
font-family: 'MaFont';
src: url('MmFont.eot?#iefix') format('embedded-opentype'),
url('maFont.woff') format('woff'),
url('MaFontttf') format('truetype'),
url('MaFont.svg#svgFontName') format('svg');
}
2 articles si vous voulez en savoir plus :
Outils
Google Web Fonts
Google a créé le service Google Web Font qui permet de mettre à disposition facilement les police web les plus utilisées. L’inclusion est facilitée car il suffit juste d’inclure une feuille de style.
<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
L’avantage de ce service est qu’il renvoi le bon format de police en fonction du navigateur de l’utilisateur. Il n’est pas possible d’utiliser des polices personnelles mais le nombre de police disponible aujourd’hui est de plus de 500, de quoi trouver son bonheur. Lors de la sélection des polices, Google vous indique même l’impact en terme de performance de l’utilisation de chaque police.
Squirrel
Si vous ne trouvez pas votre bonheur avec les google web font et que vous souhaitez utiliser une font perso, Font face generator de FontSquirrel est l’outil qu’il vous faut. Il permet de générer les différents formats (woff, ttf, otf, eot, svg) à partir d’un fichier source (quelque soit ce dernier) et vous fourni également le code CSS qui va avec.
A noter que le site FontSquirrel fournit, en plus du générateur de police, des polices gratuites et libre d’utilisation, même commerciale, à télécharger.
FontFriend
FontFriend est un bookmarklet permettant de facilement appliquer une police via un sélecteur. Cette police peut être une police standard (Arial, Times New Roman, …), une police google web font ou une police perso via un drag’n drop. Un must have !
Autres
Il existe également d’autres outils dont voici une liste non exhaustive :
- 2 sites équivalent à Google Web Font mais payant :Typekit et Fontdeck
- Fontspring : Annuaire de police (payant)
- Dafont : Le site de référence pour le téléchargement de police gratuite
- What Font Is : Site qui à partir d’une image permet de retrouver une police de caractère (des extensions Firefox et Chrome sont également disponible).
Conclusion
A priori simple, l’utilisation des web font s’avère complexe à gérer afin de supporter les différents format de police. Il faut espérer que le format woff, le plus adapté pour le web, s’imposera et sera supporté par l’ensemble des navigateurs. Des outils (Google Web Fonts, Sqirrel) permettent cependant de facilement utiliser ces polices web. Attention toutefois à ne pas abuser du nombre de police dans une seule page au risque de dégrader les performances de votre site.
Voici un petit exemple d’un fichier utilisant la police :
Pour information, la police est déjà disponible sur Google Web Fonts