Avec [Google Fonts] (https://fonts.google.com/), la police personnalisée doit être indiquée dans body et pas dans html !
Cependant, à l'heure où nous rédigeons ces lignes, quelques bogues empêchent la prise en charge de certains caractères spéciaux, comme les ellipses. Par exemple, si nous appelons la fonte Source Sans Pro en utilisant [Google Fonts] (https://fonts.google.com/)...
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<style>
body {
font-family: 'Source Sans Pro', 'Times New Roman';
}
</style>... le glyphe 0x2026 n'est pas reconnu.
En revanche, si nous appelons la fonte Source Sans Pro directement...
<style>
@font-face {
font-family: 'My font';
src: url('source/SourceSansPro-Regular.ttf') format('truetype');
}
html {
font-family: 'My Font', 'Times New Roman';
}
</style>... le glyphe 0x2026 est reconnu.
C'est pourquoi, nous préférons embarquer nos propres polices de caractère, sans recourir à un service tiers, même si cet usage limite la vitesse de chargement des pages.
Rares (inexistants ?) sont les jeux de polices qui comprennent tous les glyphes. Aussi convient-il d'éviter les caractères exotiques au format Ascii (si le caractère n'existe pas, le navigateur recherche un substitut par défaut dans les polices installées sur la machine, voire affiche un infâme carré). Ils seront avantageusement remplacés par des icônes au format Svg.
- [Arrows HTML Code and Unicode Hexadecimal] (http://character-code.com/arrows-html-codes.php).
- [Material Design Icons] (https://materialdesignicons.com/).
[The LaTeX Font Catalogue] (http://www.tug.dk/FontCatalogue/) permet d'obtenir des polices complètes, d'aspect professionnel, avec des licences d'utilisation libres.
Comme le pointe Chris Coyier, il est envisageable de demander l'affichage conditionnel des polices de caractères personnalisées grâce aux Media Queries : [Using @font-faces] (https://css-tricks.com/snippets/css/using-font-face/).
Désormais, nous nous limitons à l'embarquement des polices de caractères au format True Type Font (Ttf), dont le support est satisfaisant dans la plupart des navigateurs.
Paul Irish explique comment utiliser le script [WebFont Loader] (https://developers.google.com/fonts/docs/webfont_loader?csw=1) : [Quick guide to webfonts via @font-face] (http://www.html5rocks.com/en/tutorials/webfonts/quick/).
Avec [WebFont Loader] (https://developers.google.com/fonts/docs/webfont_loader?csw=1), qui évite l'effet Fout (Flash Of Unstyled Text, c'est-à-dire un clignotement du contenu), la page est affichée dans la police de caractères par défaut et, lorsque la police est téléchargée, le texte s'enrichit de la police de caractères personnalisée.
Les polices de caractères au format Open Type Font (Otf) sont évidemment plus précises que les polices au format TrueType Font (Otf) et, en corollaire, les fichiers nettement plus importants : ils ralentissent la vitesse de chargement d'une page ou alourdissent la taille d'un fichier généré au format Portable Document Format (Pdf).
Voici un exemple d'usage dans une feuille de style...
@font-face {
font-family: 'Roboto';
src: url('fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto Bold';
src: url('fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto Italic';
src: url('fonts/Roboto-RegularItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto Bold Italic';
src: url('fonts/Roboto-BoldItalic.ttf') format('truetype');
}
html {
font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto Bold', sans-serif;
}
strong {
font-family: 'Roboto Bold', sans-serif;
}
em {
font-family: 'Roboto Italic', sans-serif;
}
strong em {
font-family: 'Roboto Bold Italic', sans-serif;
}Le fichier glyph-emulator.html constitue un outil permettant de voir si une police de caractère contient les glyphes demandés.
Le fichier glyph-renderer.html permet de comparer les fontes dans les trois familles principales : Sans-Serif, Serif, Monospace.