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

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');
}

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 sur 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.

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 !

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 sur Google Fonts. Chacune police 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.

Code complet de démonstration

Voici le code d'une démonstration qui affiche deux paragraphes dotés chacun d'une police personnalisée. Le premier paragraphe utilise @font-face, généré par Font Squirrel. Le second paragraphe utilise une webfont fournie par l'API Google Font.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="http://fonts.googleapis.com/css?family=Droid+Sans|Tangerine"
    />
    <style type="text/css">
      #main {
        width: 900px;
        margin: auto;
      }

      @font-face {
        font-family: 'Plume';
        src: url('plumbae-webfont.eot');
        src: local('x'), url('plumbae-webfont.woff') format('woff'),
          url('plumbae-webfont.ttf') format('truetype'),
          url('plumbae-webfont.svg#webfontxhmaNmkH') format('svg');
        font-weight: normal;
        font-style: normal;
      }

      #tangerine {
        font-family: 'Tangerine', arial, serif;
        font-size: 48px;
        line-height: 50px;
      }

      #plume {
        font-family: 'Plume', arial, serif;
        font-size: 30px;
        line-height: 40px;
      }
    </style>
  </head>

  <body>
    <div id="main">
      <p id="plume">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, sem eget faucibus
        aliquet, neque metus volutpat felis, quis faucibus leo orci id ligula. Pellentesque habitant
        morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at dictum risus.
        Praesent placerat massa vitae sem interdum tincidunt. Donec pharetra urna ut lacus
        scelerisque ut malesuada est cursus.
      </p>
      <p id="tangerine">
        Suspendisse eget eros id erat varius congue. Nunc in nulla eget risus volutpat eleifend a
        nec eros. Donec ante dui, accumsan eu auctor vel, imperdiet et ligula. Phasellus a nibh
        lacus. Nam ac mi at quam faucibus viverra. Cras ut justo ac lorem accumsan rhoncus. Nulla
        sagittis ullamcorper erat, id fermentum arcu porttitor quis. In risus lacus, volutpat
        dignissim elementum eget, suscipit dignissim nisi.
      </p>
    </div>
  </body>
</html>