Polices Web Optimisées

Voici comment créer une police WOFF optimisée pour le web, à partir d’une police TrueType. WOFF = Web Open Font Format.

Pour utiliser les programmes proposés :

  • TTFautoHint
  • Fontforge

Il faudra une connaissance de Terminal (Mac) ou Console (PC).

Il existe des outils gratuits en ligne mais le processus décrit ici résultera dans des fichiers moins lourds et mieux dessinés sur Windows.

1. Créer une copie de la police originale pour ne pas l’abîmer.

2. Corriger le Hinting avec TTFautoHint [facultatif]

[mise-à-jour] sous Safari, cette étape peut agrandir les espaces intra-lettre d’une manière imprévisible.

Cet étape vise à corriger des fautes d’affichage sur les plates-formes Windows.

Télécharger l’application sur freetype.org, puis l’installer (existe pour Mac & Windows).

Dans l’application Terminal (Mac) ou Console (PC), naviguer dans le dossier de la police, puis taper le texte suivant :

ttfautohint nomAvant.ttf nomApres.ttf

3. Supprimer tous les caractères dont on n’a pas besoin en Fontforge

Si on n’a besoin que des majuscules sans accent (pour les titres des paragraphes, par exemple), je peux transformer une police à 30 ko en une police a 4 ko.

Si j’ai 6-10 polices à charger, ça peut faire une grande différence dans la vitesse de chargement de la page.

Dans Fontforge :

  1. Sélectionner les lettres nécessaires (dans ce cas, les majuscules sans accent)
  2. Appuyer sur ctrl-esc pour inverser la sélection
  3. Encoding » Detach & Remove Glyphs pour supprimer les lettres sans utilité

4. Exporter en format WOFF (Web Open Font) depuis Fontforge

Dans Fontforge :

  1. Appuyer ctrl-maj-G
  2. Sélectionner Web Open Font
  3. Sauvegarder

5. Relier le fichier SVG avec la police

Dans votre fichier CSS :

font-face {
    font-family:‘nomDansLeSVGt’;
    src:url(’/fonts/nomDeLaPolice.woff’) format(‘woff’);
    font-weight:normal; font-style:normal;
}

Cet article est basé sur un excellent article en anglais sur pixelsvsbytes.com.