Une police personnalisée CSS3 avec @font-face ou Google Font

Une police personnalisée CSS3 avec @font-face ou Google Font

Une police personnalisée CSS3 avec @font-face ou Google Font
Cet article a été écrit en 2010. Le web évoluant vite, il est possible que certains points soient maintenant obsolètes !

L’utilisation de polices personnalisées a toujours été un problème pour les développeurs et les webdesigners. Une image de texte est affichée correctement par tous les navigateurs, tandis q’un vrai texte peut être référencé et sélectionné. Il est à présent possible grâce à la propriété @font-face d’embarquer des polices sur son site, et que celles-ci s’affichent correctement même si l’utilisateur n’a pas la police installée.

Avant toute chose il est important de savoir quels navigateurs implémentent la fonctionnalité @font-face…A tous les coups ça ne va pas marcher sur Internet Explorer !

Eh bien si ! Internet Explorer reconnait la propriété @font-face ! Mais attendez une seconde… Vous vous doutez bien que ce serait un peu trop simple qu’IE respecte les standards comme tout le monde. Effectivement, il y a quand même un hic, c’est qu’IE ne sait interpréter que son propre format de police, qui lui, n’est pas du tout standard… Mais rassurez-vous, à la fin de ce tutoriel, vous aurez une belle police sur tous les navigateurs !Le @font-face simple
Commençons tout d’abord par le cas simple qui fonctionnera correctement sur tous les navigateurs modernes. L’application d’une police personnalisée passe tout d’abord par le chargement de celle-ci dans le navigateur du client. C’est justement ce que fait la propriété CSS3 @font-face. Voici un exemple de son utilisation :
@font-face {

font-family: ‘Plume’;

src: url(‘PlumBAE.ttf’);
}
Ce bout de code un peu particulier ne sert pas à appliquer un style à un élément, mais à déclarer une police. L’attribut font-family correspond au nom que l’on va assigner à cette police, afin de l’appliquer ensuite sur des éléments. L’attribut src indique tout simplement le chemin vers le fichier de police (.ttf ou .otf). Une fois la police déclarée, elle est utilisable comme n’importe quelle autre police :
#plume{
font-family: ‘Plume’, Georgia, serif;
}
Et c’est tout ! Ces quelques lignes de code suffisent à faire fonctionner votre police sur les versions récentes de Firefox, Chrome, Safari et Opera. Maintenant il va falloir s’attaquer au rebelle du lot.@font-face ultra compatible
Internet Explorer utilise le format de police .eot (Embedded OpenType) plutôt que les .ttf (TrueType) ou .otf (OpenType). Par conséquent, il va falloir feinter pour rediriger IE vers un fichier .eot et les autres navigateurs vers le .ttf ou .otf.

Il existe de nombreuses méthodes permettant de le faire. En réalité, une technique a été communément admise comme étant la plus pertinente, et c’est uniquement celle-ci que nous allons voir maintenant.

Parmi les attributs que l’on peut ajouter à notre déclaration de police @font-face, il existe l’attribut local “font-family” qui peut être utilisé pour prioriser une version locale de la police recherchée si elle est présente sur l’ordinateur du client, ainsi que l’attribut “Format”, qui sert à préciser le format de police utilisé.

Internet Explorer ne connait aucun de ces 2 attributs et c’est cette faille qui va nous servir à le détecter efficacement grâce au code suivant :
@font-face {

font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot’);
src: local(‘x’),
url(‘GraublauWeb.ttf’) format(‘TrueType’);
}
Oula, ça y est, je ne comprends plus rien !

Un peu d’explications ne sont pas de refus : Ici, Internet Explorer comprendra l’instruction src : url(‘GraublauWeb.eot’) mais s’arrêtera sur le local(‘x’) qu’il n’arrivera pas à lire. La valeur contenue dans local() a pour seul condition de ne pas être une police existante, donc vous pouvez par exemple y mettre un simple caractère. D’ailleurs, un caractère de smiley y est souvent placé car il est considéré comme la “marque de fabrique” de cette méthode, et vous le retrouverez un peu partout.

Les autres navigateurs considéreront la définition de police suivante qui est la version TrueType universelle, en ignorant également le local(‘x’), qui ne correspond vraisemblablement pas à un nom de police existant localement chez le client… Et voilà ! Cet extrait de code suffit à faire fonctionner le capricieux Internet Explorer !

Un dernier point cependant, certaines anciennes versions de Chrome ne supportent qu’un récent format spécifique, le .woff ainsi que les polices SVG.

Une adaptation du code précédent permet de le rendre encore plus universel, en gérant ces 2 cas supplémentaires :
@font-face {

font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot’);
src: local(‘x’),
url(‘GraublauWeb.woff’) format(‘woff’),
url(‘GraublauWeb.otf’) format(‘opentype’),
url(‘GraublauWeb.svg#grablau’) format(‘svg’);
}
Cette technique suit le même schéma que la précédente.

Vous reconnaîtrez qu’il est assez fastidieux de devoir gérer tous ces cas et tous ces formats à la main, ce qui passe d’ailleurs par une phase de conversion de formats. Heureusement pour nous, il existe des outils qui font tout le travail à notre place, et un en particulier : le @Font-face Generator de Font Squirrel.

Il suffit d’uploader une police (attention à bien respecter les droits d’auteur liés aux polices que vous utilisez), et Font Squirrel se charge de vous fournir un “kit” contenant tous les formats convertis de votre police ainsi que des fichiers HTML et CSS de démo pour que vous n’ayez plus qu’à faire un copier-coller vers votre site ! Ceux qui auront la curiosité d’activer le mode “Expert” verront d’ailleurs que c’est la méthode du “smiley” qui est également utilisée par ce générateur.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour haut de page

Paiement terminé

Félicitations, votre paiement est bien terminé !