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

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

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, qui sont détaillées sur cet article de Paul Irish. 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(“NomDePolice”) 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(“FormatDePolice”), 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 reconnaitrez 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.

Tu n’aurais pas pu commencer par nous parler de ça plutôt que de tout détailler ?

Haha effectivement ! Mais reconnaissez que comme ça, vous comprenez bien le fonctionnement de ces kits !

Passons maintenant à une méthode alternative très intéressante : les Google Fonts.

Les Web Fonts avec Google Font

Il existe un autre moyen d’utiliser des polices exotiques sur une page web sans avoir à s’occuper de @font-face. Il existe des services qui fournissent des polices à intégrer directement dans son CSS depuis une URL distante. Les polices proposées sont en général adaptées à l’affichage dans un navigateur, s’afficheront correctement sur la majorité des navigateurs, et enfin le service se chargera de fournir la police à l’utilisateur, ce qui peut s’avérer non négligeable étant donné que la plupart des polices font entre 50ko et 300ko ! Cela nous fait donc 3 bonnes raisons de préférer passer par un tel service lorsqu’une des polices proposées par le service en question vous plaît.

Nous allons dans cet article nous intéresser particulièrement au service Google Font. Ce service gratuit est constitué de la Google Font API et du Google Font Directory.

Google Font API

L’API de Google Font est très facile à manipuler. Il suffit simplement d’ajouter une feuille de style à votre page HTML afin d’obtenir la nouvelle police.
L’exemple officiel qui suit illustre bien le concept :

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

Ici, il n’y a donc pas de @font-face à écrire. Tout est géré dans la feuille de style hébergée chez Google, qui va effectuer tous les traitements de son côté afin d’assurer l’affichage correct de la police.
L’utilisation de l’API se résume donc à :

  • Inclure la police qui nous intéresse
  • L’appliquer à une classe CSS avec font-family

Simple non ?

Pour ceux qui se poseraient tout de même la question de ce qui se passe dans cette fameuse feuille de style CSS, Google analyse quel navigateur est utilisé par l’utilisateur, et renvoie le code CSS qui fonctionne le mieux pour ce navigateur. Et ce code CSS est composé d’un simple @font-face !

Le fallback et les polices alternatives

Il est important de préciser au moins une police alternative standard au cas où pour une quelconque raison, la police n’ait pas été chargée correctement.
Ainsi, il faut au minimum ajouter à notre propriété font-family la valeur “serif” ou “sans-serif” après notre web font.

font-family: 'Tangerine', serif;

Profitons-en pour rappeler qu’une police serif possède des “empattements” (petites extensions au bout des lettres représentant l’écriture manuscrite), comme la police Times New Roman, et qu’une police sans-serif ne possèdera pas d’empattements, comme la police Arial.

Tout comme l’usage habituel de la propriété font-family, il est bien entendu possible d’ajouter autant de polices alternatives qu’on le souhaite :

font-family: 'Tangerine', Calibri, Georgia, serif;

Le navigateur tentera d’afficher la première police, puis si elle est indisponible, passera à la suivante… jusqu’à atteindre serif ou sans-serif.

Construire l’URL de la feuille de style

L’URL du CSS de l’API Google Font à inclure est basée sur les règles suivantes :
L’URL commence toujours par :


http://fonts.googleapis.com/css?family=

On y ajoute ensuite les noms des polices à inclure, en utilisant le symbole “+” à la place des espaces, et en séparant chaque police par un “|” :


http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Il vaut mieux utiliser cette méthode pour récupérer plusieurs polices plutôt que d’inclure une nouvelle CSS, ce qui consommerait une requête HTTP supplémentaire.
Enfin, il est possible de spécifier si l’on souhaite une police en italique ou en gras en ajoutant des valeurs après le nom de la police suivi par le caractère “:”.
Voici les différentes valeurs possibles :

  • Italique : “italic” ou “i”
  • Gras : “bold”, “b” ou le poids de la lettre, 700 par exemple
  • Gras italique : “bolditalic” ou “bi”

Comme le montrent ces exemples :


http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold


http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b


http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Enfin un paramètre “subset” sert à indiquer le type d’alphabet à utiliser pour une police (Cyrillique ou Latin par exemple) et s’écrit de la manière suivante :


http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Google Font Directory

L’ensemble des polices utilisables par l’API Google Font se trouve dans le Google Font Directory.
Une trentaine de polices y sont proposées. Chacune possède une page affichant les détails de la police ainsi qu’un célèbre “The quick brown fox jumps over the lazy dog” contenant les 26 lettres de l’alphabet latin. Une page de prévisualisation est également disponible, ainsi qu’une section “Get the code” qui vous fournira directement l’adresse de la feuille CSS à inclure.

Pour ceux qui souhaitent aller plus loin, vous pouvez consulter en anglais les considérations techniques, la documentation de l’API pour les développeurs, et utiliser les “Advanced techniques” présentes sur les pages “Get the code” afin d’améliorer le chargement des polices.

J’espère que ce tutoriel aura éveillé votre inventivité en matière de polices sur le web, mais faites tout de même attention à ne pas surcharger vos pages avec de trop nombreuses polices, ni des polices trop volumineuses.

Vous pouvez tester la propriété @font-face et les polices Google Font ici :

Démonstration de la propriété @font-face en CSS3 et des polices Google Font

A bientôt dans un prochain tutoriel !

3 thoughts on “Une police personnalisée CSS3 avec @font-face ou Google Font

  1. Bonjour

    La technique ‘Google’ est très intéressante et fonctionne très bien sur une page simple.

    Par contre je n’arrive pas à la faire marcher sur mon site où j’utilise un thème WP.
    Je colle l’appel au css dans le Head.php puis le font-family dans le css du thème dans l’élément body et rien ne se passe.

    Avez-vous une idée ?

    Merci

    • Je dirais de vous assurer que le fichier de police est bien trouvé en regardant l’onglet Ressources de Chrome Developer Tools.
      Si le fichier est bien là, regardez si un autre style écrase celui-ci dans le reste du fichier CSS de votre thème.
      Si ce n’est pas ça, je ne sais pas ! :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>