vos-polices-preferees-sur-votre-site-web-en-css3-tous-navigateurs-confondus

Vos polices préférées sur votre site web (tous navigateurs confondus)

Vos polices préférées sur votre site web (tous navigateurs confondus)

Nous allons voir dans ce tuto comment manipuler la propriété CSS @font-face, qui permet d’utiliser des polices de caractères qui ne seraient pas présentes sur les machines de vos internautes. Ces quelques lignes de CSS vont permettre d’épicer vos interfaces et de résoudre le problème des titres en images, qui ne sont ni accessibles ni référencables. Enfin des polices sympa et utilisables sur le web ! ;)

Un peu d’histoire pour commencer…

Depuis la création d’Internet, les webdesigners se contraignent à utiliser des pauvres listes de polices multi-plateformes qui assurent une compatibilité maximale (Arial, Tahoma, Verdana, etc…). On peut évidemment utiliser des polices farfelues dans des blocs d’images, mais comme dit plus haut, ce n’est pas optimal, c’est même vivement déconseillé. D’une part, les titres en images ne seront pas administrables, mais surtout pas référencables et pas accessibles.

Alors que quelques scripts ont tenté de solutionner le problème par le remplacement par images (SiFR, CUfonts, FLIR, etc…) il apparaît clairement que cette technique n’est pas pratique.

Pour rappel la technique de remplacement par images consiste à remplacer du texte dur (exemple : <h1>Texte en dur</h1>) par des images pour chaque lettre utilisée. Mais voilà, cela nécessite le chargement d’un fichier javascript, qui ne sera pas forcément interprété par le navigateur de l’internaute, et c’est surtout très lourd de déploiement car il faut générer les images à partir des polices…Tu veux changer ta couleur de typo ? Recréé ta police en images. Tu veux grossir ta typo ? Recréé ta police en images…etc…!

Ce temps là est désormais fini, grâce à la propriété CSS3 « @font-face ».

The new revolution : @font-face à la rescousse des webdesigners

Cette technique est tout simplement révolutionnaire, un miracle de simplicité comparé aux méthodes qui existaient jusque là. Voici comment l’utiliser :

/* Étape 1 : importez la police qui se trouve sur votre serveur */
@font-face {
font-family: MaSuperPolice;
src: url(/mondossier/MaSuperPolice.ttf) format("truetype");
}
/* Étape 2 : utilisez désormais la police comme vous le faites avec les autres */
h1, h2, h3 { font-family: MaSuperPolice, verdana, helvetica, sans-serif;
}

Et voilà ! Votre site affichera désormais des H1, H2 et H3 avec la police que vous aurez uploadé sur votre serveur (assurez-vous d’avoir les droits d’utilisation de la typo bien-sûr !).

Sérieusement, c’est aussi simple que ça ?!

Bien évidemment que non : cet enfoiré d’ Internet Explorer pose encore une fois problème. Bizarrement, Internet Explorer interprète la propriété @font-face depuis IE4 (1997, bordel ça date !!) mais d’une manière totalement différente, encore une fois Micro$oft n’en a fait qu’à sa tête et décida ne ne pas se baser sur les standards. En effet, IE ne supporte que les polices « Embedded OpenType » soit les fichiers « .eot ».

Pour créer des fichiers de type EOT, il vous faudra passer par l’horrible freeware WEFT développé par cro$oft, ou bien utiliser cette petite application web bien plus simple : TTF2EOT. Une fois votre police convertie, uploadez les deux fichiers sur votre serveur, la police TTF et la police EOT. Puis, hackez-moi-donc ce satané IE avec ces quelques lignes de code :

/* Étape 1 : importez LES DEUX POLICES qui se trouvent sur votre serveur */
@font-face {
font-family: MaSuperPolice;
/* POUR IE */
src: url(/mondossier/MaSuperPolice.eot);
/* POUR LES AUTRES NAVIGATEURS */
src: url(/mondossier/MaSuperPolice.ttf ) format("truetype");
}
/* Étape 2 : utilisez désormais la police comme vous le faites avec les autres */
h1, h2, h3 { font-family: MaSuperPolice, verdana, helvetica, sans-serif;
}

Et voilà ! Votre police fonctionne désormais dans tous les navigateurs ;) Certes, avoir recours à une ligne de code alternative pour IE c’est chiant, mais depuis l’apparition de @font-face dans Safari, Firefox et Chrome, cette technique promet d’avoir de l’avenir. Simple, léger, rapide, on est bien loin des techniques archaïques qu’on utilisait avant : pas de Flash, pas de JavaScript, pas d’images de remplacement…Et c’est valide CSS3 !

Le seul inconvénient qu’on pourrait trouver à cette méthode c’est le fait de devoir charger la police, ce qui peut ralentir le chargement de votre page. Mais si jamais votre police est bloquée par les réglages du navigateur ou un quelconque problème, les polices classiques listées après la votre dans le CSS prendront le relais. Génial non ? Allez, maintenant montrez moi vos jolis sites pleins de belles polices :)