CSS

Typographie

Police de caractères « Google Fonts »

Je me souviens de la patente Microsoft pour installer une police de caractères, exclusivement pour les usager d’Internet Explorer. Je ne me souviens pas si j’y était arrivé mais l’effort n’en valait pas la peine! Chaque visiteur étant forcé de faire une installation quasi manuelle. Jusqu’à ce que Google arrive avec ces jeux de polices d’écriture ou polices de caractères spécialement conçu pour le Web et ce, tout a fait gratuitement.

Je ne sais pas ce qui explique ce retard. Peut être parce que les polices par défaut font l’affaire. C’est aussi vrais que rien n’est plus kétaine que de l’abus de couleurs, grosseurs et de police de caractères dans une présentation graphique. C’est sans doute aussi que c’est toute une job de bras que de réaliser une police de caractère digne de ce nom. Ergonomique, original, et complètes! Sans parler que les applications sont très spécialisé. Comme si Photoshop servait exclusivement à faire des boutons ...à 4 trous! Plutôt rare à l’époque, on est passé du FontLab Studio à 1000$ au service en ligne gratuit comme BitFontMaker2™ BitMap Font Editor. Les solutions abordables ne manque pas aujourd’hui.

• FontCreator 8.0 (80.00$)
• Type 3.2 (65.00$)
• iFontMaker™ (5.00$)
• FontForge (Gratuit)
• Glyphr Studio (Gratuit)
• FontArk font editor (Gratuit)
• Font Squirrel Webfont Generator (Gratuit)

Google Fonts

Mais voilà, Google a l’ambition de rassembler l’ensemble des polices de caractères de l’humanité, rien de moins. Inquiétant à long terme, c’est un risque bien minime dans la mesure où il ne s’agit que de « style » tout à fait complémentaire. Par contre le poids est nettement un problème! D’autant que Le poids d’une page web est une lacune répandue, notamment pour la capacité des mobile, iPod, iPhone et même les tablettes avec à penne 1 Mo de mémoire!

C’est donc la seule précaution à prendre, choisir avec soin un ou deux police de caractères maximum. Se limiter au format normal (Normal 400) et surtout choisir un seul jeu de caractères (set), dans le cas de francophone « Latin (latin) ».

1. Rendez-vous sur https://www.google.com/fonts
2. Taper un texte
3. Sélectionner la police
4. Utiliser la police

Utiliser les polices

Il faut d’abord déclarer la police avec une référence, localement après y avoir déposer les fichiers téléchargés ou directement sur les serveur de Google, puisque les serveur de Google sont plus rapide que les autres (!). Dans mon exemple j’utilise deux polices : « Noto Sans » et « Lobster ». On notera qu’il est possible d’ajouter plusieurs polices en les séparent par le séparateur | .

<link href="http://fonts.googleapis.com/css?family=Noto+Sans|Lobster" rel="stylesheet" type="text/css">


/* ou encore avec @import */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans|Lobster);

Google offre aussi un javascript pour ce faire

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ "Noto+Sans::latin" ] }
  };
  (function() {
    var wf = document.createElement("script");
    wf.src = ("https:" == document.location.protocol ? "https" : "http") +
      "://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";
    wf.type = "text/javascript";
    wf.async = "true";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

Créer une classe

Rien de plus simple, récupérer le nom de la police (Noto Sans) pour y faire référence : font-family: "Noto Sans", sans-serif;.

<style>
h1 { font-family: "Lobster", sans-serif; }
p.noto { font-family: "Noto Sans", sans-serif;  }
</style>

<h1>Ma police Google Fonts</h1>
<p class="noto">Ma police Google Font avec une classe perso.s</p>