CSS

Typographie

Police de caractères et règle CSS @font-face

Attribut font-family

La balise <font> n’étant plus supportée par le HTML5 c’est maintenant au CSS de faire la job! Mais rien n’a vraiment changé, c’est toujours le navigateur qui permet par défaut l’usage des polices de caractères déjà installées sur la machine de l’internaute. En principe il suffit de spécifier en CSS le nom de la police à l’aide de l’attribut « font-family ». Ex : font-family="Heisei Mincho W9". Facile! Et pratique mais toujours aussi risqué pour la plupart des polices de caractères. Il faut donc définir plusieurs polices pour s’assurer d’être compatible mais pas n’importe lesquelles, non, quelques polices choisies dites « rassurantes » (Web Safe Font)! Pas de panique, il s’agit en fait des polices génériques de Windows et de Macintosh. C’était la meilleurs solution, avant l’Unicode faut croire! Je pense qu’aujourd’hui chaque ordinateur devrait avoir au minimum une bonne référence UTF-8.

Familles de polices génériques

Enfin, la W3C a tout de même eu la bonté de nous fournir 5 « polices de base » ou plutôt 5 familles en principe compatible avec la plupart des systèmes, tout le monde connaît les vedettes sans-serif, serif et monospace.

Historiquement chaque plate-forme avait ses propres polices de confiance, comme cette liste :

Windows

• Arial ou "Trebuchet MS", "Times New Roman", Verdana, "Courier New", "Lucida Console", Impact

Macintosh

• Helvetica, Times, Geneva, Courier, Monaco, Charcoal

Mais force est de constater que si Windows est toujours aussi incompatible avec les « Helvetica, Geneva, Monaco », le Mac a pour sa part intégré à ma grande surprise la plupart des polices Windows, même « Trebuchet MS »! Et donc comme d’habitude le navigateur utilise la première police compatible et ignore les suivantes :

/* Exemple CSS */
p {
    font-family: "Times New Roman", Times, serif;
}

/* Exemple avec familles de polices génériques */
/* Important : spécifiez toujour la police générique en dernier! */
.arial { font-family: Arial, Helvetica, sans-serif; }
.time { font-family: "Times New Roman", Times, serif; }
.courrier { font-family: "Courier New", Courier, monospace; }
.georgia { font-family: Georgia, "Times New Roman", Times, serif; }
.verdana { font-family: Verdana, Arial, Helvetica, sans-serif; }

Voir la liste sur Wikipedia.

Formats de polices externe avec la règle « @font-face »

Les navigateurs en on fait du chemin depuis le vieux format Internet Explorer 5+ « eot ». Un format de police chargé et rendu disponible par le navigateur directement en CSS. Un simple URL, idéalement une adresse locale, vers le fichiers .eot. L’enjeu était davantage au niveau de la propriété, des licences. Un aspect juridique qui a toutefois participé au développement des formats de polices « TrueType-OpenType (TTF) » et « CFF-OpenType (OTF) » et surtout leur version compressé « Web Open Font Format (WOFF) », gratuit, ouvert et jusqu’à 40 % plus légé. Aspect non négligeable quand on sait qu’un fichier peut facilement faire 100k. Un paquet de trouble pour un mobile. Pour ces derniers, notamment IOS, on préférera le format vectoriel « SVG-OpenType » (spécifications SVG 1.14) un nouveau format OpenType (donc inclus dans le Web Open Font Format) du HTML5 ou les contours de glyphes peuvent être représentés par le format SVG à la place de contours TrueType.

Le format WOFF 2.0 présenté en 2014, est une amélioration de WOFF en proposant une meilleur compression de l’ordre de 30%, tout en officialisant le support des polices SVG OpenType10.

Compatibilité des formats

Chaque déclaration @font-face fournit le nom de la famille de polices, qui joue le rôle de groupe logique de plusieurs déclarations, ici deux classes de la même famille comme le propose Google Developers.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('ttf'),
       url('/fonts/awesome.eot') format('eot');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'), 
       url('/fonts/awesome-i.woff') format('woff'),
       url('/fonts/awesome-i.ttf') format('ttf'),
       url('/fonts/awesome-i.eot') format('eot');
}

• La propriété font-family nous permet de référencer le nom de la famille.
• La propriété font-style nous permet de référencer le style.
• La propriété font-weight nous permet de référencer la grandeur.
• La propriété src qui spécifie les URL en ordre de priorité.
• La directive local() nous permet de référencer, charger et utiliser les polices installées localement.
• La directive url() nous permet de charger des polices externes. Le format() permet de spécifier un algorithme d’optimisation ou de compression facultatif indiquant le format de la police.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Exemples

@font-face {
  font-family: 'Quattrocento';
  src: url("Quattrocento-Regular.otf") format("opentype"), url('Quattrocento-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Prosto';
  src: url('Prosto.ttf') format('truetype');
}

@font-face {
  font-family: 'Langdon';
  src: url('Langdon.otf') format('opentype');
}

@font-face {
  font-family: 'Oranienbaum';
  src: url('Oranienbaum.ttf') format('truetype');
}

@font-face {
  font-family: 'fanwood-webfont';
  src: url('fanwood-webfont.eot?');/* IE 5-8 */ 
  src: local('☺︎'), /* sneakily trick IE */
    url("fanwood-webfont.woff") format("woff"), /* FF 3.6, Chrome 5, IE9 */
    url("fanwood-webfont.ttf") format("truetype"), /* Opera, Safari */
    url("fanwood-webfont.svg#webfont") format("svg"); /* iOS */
  }
/* Truc pour éviter au mobile de planté sur le format .eot! */
@media screen and (max-device-width: 480px) {
  @font-face {
    font-family: "fanwood-webfont";
    src: url("fanwood-webfont.woff") format("woff"),
    url("fanwood-webfont.ttf") format("truetype"),
    url("fanwood-webfont.svg#webfont") format("svg");
}}

.quattrocento { font-family: 'Quattrocento', 'Georgia', serif; }
.prosto { font-family: 'Prosto', 'Georgia', serif; }
.langdon { font-family: 'Langdon', 'Georgia', serif; }
.oranienbaum { font-family: 'Oranienbaum', 'Georgia', serif; }
.fanwood-webfont { font-family: 'fanwood-webfont', 'Georgia', serif; }

Alternatives

On peut aussi « importer » des formats via l’instruction « @import » ou encore la balise <link>. C’est la façon dont Google Fonts offre ses polices. L’exemple suivant utilise « @import » pour charger la police « Open Sans » à partir de Google Fonts. En fait c’est un simple fichier CSS qui déclare les format avec @font-face.

@import url(//fonts.googleapis.com/css?family=Open+Sans);
/* Ou encore <link> */
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

/* Pour l’utiliser de cette façon */
body { font-family: "Open Sans", sans-serif;}

Police de pictogrammes

C’est exactement le même principe avec les pictogrammes vectoriels comme Font Awesome 4.3. Toujours aussi poids lourd mais d’une grande qualité, transparent, utilisable via CSS, colorable, et adaptatif. Le fichier externe contient les associations avec la balise <i> facile à utiliser.

<!-- Dans l’entête -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Body-->
<i class="fa fa-bed"></i>

Font Squirrel

Comme Google Fonts, Font Squirrel est avant tout un répertoire de police gratuite à usage commercial. L’écureuil parcourt le web à la recherche de polices libres de droits. Ce n’est pas dans la quantité mais dans la qualité qu’il se distingue comme il se plaît à dire, référence directe à Google et sa prétention de référencer toutes les polices de l’univers!

Font Squirrel c’est aussi plusieurs outils comme un générateur de code des plus utiles qui permet en autres d’encoder (base64) les formats directement dans l’attribut « url » et ainsi sauver des dizaines de ko!

Conclusion

En conclusion, les formats de police de caractères sont maintenant très bien supporté. Alors pourquoi pas, à condition d’apporter une véritable valeur ajoutée. Car il faut le dire, c’est lourd, tellement que les formats de polices sont souvent ce qui demande le plus de temps à charger dans une page Web. Avec de drôle de réactions, de clignotement, et pire au moindre manque de ressources. À utiliser donc avec modération, avec des fichiers de 50 ko au lieu de 400 ko par exemple...

Il existe d’ailleurs plusieurs façon d’optimiser ou d’harmoniser le chargement des formats, compresser des polices de qualité, avec tous les éléments (Font Squirrel le fait pour vous), faire un seul chargement à l’aide de témoins (cookies). Ou encore créer les balises un fois seulement les formats chargés à l’aide d’événement. Pour ce faire, deux exemple de chargeur de format :

• « Flash of Faux Text-still more on Font Loading » de Zach Leatherman
• « Better @font-face with Font Load Events » aussi de Zach Leatherman :

/* Une fois le chargement */
var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';

/* Firefox, IE 9+ */
document.body.appendChild(el);

/* WebKit/Blink */
el.innerHTML = 'Content.';

Mais encore plus prometteur, et il était temps, c’est les polices systèmes. Retour à la case départ, mais une police accessible par défaut, plus rapide, flexible, intuitive et sans bavure... À lire absolument : « Typographie - La police Web parfaite » par Django Blais.

Références

• Quick guide to webfonts via @font-face par Paul Irish
• Bulletproof @font-face Syntax par Paul Irish
• IEBlog : The CSS Corner: Better Web Typography For Better Design
• IEBlog : CSS : utilisation de toutes les fonctionnalités de polices (Français)
• Recommandation SVG1 du W3C en version française
• W3C : WOFF 2.0 Evaluation Report
• WOFF File Format 2.0
• Google : Optimisation des polices Web par Ilya GrigorikPublished (traduit en français)
• Nice Web Type
• Font Squirrel
• Hapax Berbère Normal (allégé)
• Web Open Font Format
• W3C : CSS Fonts Module Level 3
• W3C : Fonts