font-face
Il est de notoriété publique que l’usage des fontes sur le Web est limité à une poignée de fontes non pas standardisées, mais suffisamment répandues pour pouvoir être utilisées sans trop de risques. Et cela pour une raison très simple : la police de caractères que l’on souhaite utiliser doit être présente sur le système de l’utilisateur pour être utilisée par le navigateur.
CSS 2 (publié en 1998) comprenait un mécanisme qui autorisait les auteurs de pages web à proposer une police au téléchargement, police qui serait ensuite utilisée dans la page. Il s’agit de la règle @font-face, mais à l’époque, celle-ci avait été peu implémentée par les navigateurs, ou alors partiellement.
Depuis pas mal de mois (années?) maintenant, les webdesigners prennent un malin plaisir à utiliser ce formidable outil pour personnaliser leurs interfaces, quitte à violer quelques droits d’auteurs au passage… Le nombre de sites utilisant @font-face a augmenté de 8500% entre 2010 et 2011…
Mais que fait HADOPI ? (lol)
Mais revenons quelques années en arrière : pendant longtemps, le seul navigateur à avoir un support tout relatif de @font-face était Internet Explorer. Mais il fallait utiliser un format de police un peu obscur, propriétaire, et généré par des outils peu disponibles. Bref, c’était assez limité.
Lorsque le groupe CSS a publié CSS 2.1 (correctif de CSS 2 qui, entre autres, supprime un certain nombre de choses peu réalistes, pas ou mal implémentées, etc.), @font-face a été supprimée.
@font-face : le retour
En réalité, @font-face n’a pas été supprimée de CSS, elle a juste été repoussée à CSS 3. Cette règle reste le mécanisme de référence pour utiliser dans une page web une police non disponible sur le poste de l’utilisateur. Voyons rapidement sa syntaxe :
@font-face {
font-family: "Ma Super Fonte";
src: url('MaSuperFonte-Regular.ttf');
}
@font-face {
font-family: "Ma Super Fonte";
font-style: italic;
src: url('MaSuperFonte-Italic.ttf');
}
@font-face {
font-family: "Ma Super Fonte";
font-weight: bold;
src: url('MaSuperFonte-Bold.ttf');
}Dans cet exemple, pour une même famille de fontes on importe trois fontes: regular («normale»), italic et bold. On pourra ensuite, dans le code CSS de nos pages, demander la police de caractères «Ma Super Fonte» pour chacune de ces trois fontes. Par exemple :
body {
font-family: "Ma Super Fonte", Helvetica, Arial, sans-serif;
}
h1 {
/* Utilisera MaSuperFonte-Bold.ttf */
font-style: normal;
font-weight: bold;
}
h2 {
/* Utilisera MaSuperFonte-Italic.ttf */
font-style: italic;
font-weight: normal;
}
h3 {
/* Utilisera ??? (fonte bold italic non chargée!) */
font-style: italic;
font-weight: bold;
}
p {
/* Utilisera MaSuperFonte-Regular.ttf */
font-style: normal;
font-weight: normal;
}Support de @font-face par les navigateurs
Aujourd’hui, l’ensemble des navigateurs du marché l’ont implémenté :
- IE 8 et supérieur
- Firefox 3.5 et supérieur
- Chrome
- Safari 3 et supérieur
Pour tous ceux qui désirent « customiser » leur site, Fontsquirrel.com vous propose un générateur de code et de formats de police pour une compatibilité totale sur l’ensemble des navigateurs. On y trouve également des « kits » tout faits. Merci qui ?
