Avant d’expliquer la méthode pour créer un web font, voyons tout d’abord pourquoi créer en une !

On peut avoir deux raisons pour créer sa propre Web Font :

• pour avoir une écriture particulière sur son site, autre que les classiques Helvetica, Arial, …
• pour créer une fonte d’icônes, afin de disposer d’icônes retaillable à l’infini, sans effet de créneau.

Dans le premier cas, on peut éventuellement utiliser d’autres fontes disponibles gratuitement, sans avoir à dessiner soi-même toutes les lettres majuscules, minuscules, les chiffres, et tous les autres caractères imaginables. Vous pouvez par exemple regarder des sites comme cssfontstack.com.

Dans le second cas, il existe également des moyens de choisir ses icônes dans un panel de plusieurs centaines disponibles sur des sites spécialisés (ex: icomoon.io)

Si malgré toutes ces possibilités, vous n’êtes pas satisfait et que vous voulez exprimer pleinement votre créativité, nous pouvons nous lancer dans le vif du sujet.

Inkscape et son éditeur de fonte

Nous allons utiliser l’éditeur opensource Inkscape pour créer notre font. Installez-le et lancer-le.
Vous devriez obtenir une fenêtre comme celle-là :

Ouvrez le menu « Text ->  SVG Font Editor… ». Une barre va apparaître à droite avec l’éditeur de fonte.

Il n’y a pour l’instant pas de fonte. Avant de décrire l’interface, nous allons créer une fonte. Pour cela, cliquez sur le bouton « Nouveau ». Une fonte apparait sous le titre « Fonte ». Vous pouvez en changer le nom en cliquant dessus.

L’interface se compose de la sorte :

• Un menu « paramètres généraux » qui contient la description de la fonte
• Un menu « Glyphes » qui contient la liste des caractères affichables dans la fonte
• Un menu « Crénage » qui permet de définir des espacements particuliers entre certaines paires de caractères (nous y reviendrons).

Les carrés noirs qui apparaissent en bas sont les glyphes par défaut, et correspondent au texte écrit dans le champ dessous.

Nous allons maintenant modifier le cadre d’inkscape pour correspondre à ce carré noir.

Mise en place du cadre

Tout d’abord,voyons quelle est la taille de ce carré noir. Pour cela, il faut se rendre dans l’éditeur XML d’inkscape (Ctrl + Shift + X) et voir la balise « <svg:svg><svg:defs><svg:font><svg:missing-glyph> ». Elle correspond au carré noire par défaut. Dans l’attribut « d », on voit que c’est un carré de 1000×1024.

Pourquoi cette taille ? Afin de laisser un léger espacement entre les caractères. En effet, on a pu voir dans la description de la fonte que la largeur est de 1024, cela laisse donc 24 entre les différents caractères.

Il est à noté qu’il n’y a pas d’unité (px, cm ou autre) car il s’agit de proportion.

Tant que nous sommes dans l’éditeur XML, nous allons faire une petite modification pour éviter quelques désagréments ultérieurs : aller sur la balise « <svg:svg><svg:g> » et regarder s’il y a un attribut « transform ». Si oui, supprimez-le !

Ensuite, quittez l’éditeur XML et allez dans les propriétés du document (Ctrl + Shift + D). Sur l’onglet « Page », mettez les dimensions du carré noir, à savoir :

• Largeur : 1000
• Hauteur : 1024

Le cadre de fond prend alors la forme du glyphe par défaut. Vaildez et nous sommes de retour sur inkscape. Vous pouvez maintenant dessiner ce que vous voulez dans le cadre ! Si vous avez besoin d’aide, il existe des milliers de ressources pour apprendre à utiliser inkscape, cela sort du cadre de cet article.

Créer son premier glyphe

Après avoir fini votre dessin, il faut l’associer à un caractère. Pour cela, allez dans l’onglet « Glyphes » et cliquer sur le bouton « Ajouter un glyphe ». Apparait alors une ligne dans la liste, avec un nom généré par défaut et un espace vide à droite. Pour changer le nom de la glyphe, il faut cliquer dessus. Pour changer le caractère lié au glyphe, il faut cliquer sur l’espace vide à droite.

NB : mon dessin est moche, mais il s’agit d’un exemple 🙂

Ici, j’ai associé le glyphe au caractère « e », et instantanément les carrés noirs correspondant à ce caractère ont disparut.

Maintenant, il faut associer le dessin à ce nouveau glyphe. Pour cela, il faut sélectionner le dessin, sélectionner le glyphe et cliquer sur le bouton « Obtenir les courbes à partir de la sélection ».

Attention : cela ne marche que si le dessin est un unique chemin ! Pour obtenir un chemin de n’importe quel dessin,  il suffit de le transformer en chemin à l’aide des options « Path -> Object to path », « Path -> Stroke to path », et les opérations d’assemblage de chemin disponible pour n’obtenir qu’un seul chemin.

Si tout se passe bien, votre caractère doit apparaître dans la prévisualisation :

Avec de la patience, vous pourrez remplir tous les caractères connus, ou bien uniquement les quelques icônes qui vous intéresse.

Gérer la largeur des caractères

Si vous ne faite pas uniquement des icônes, mais que vous faites une vraie écriture complète, vous risquez d’être confronté à un problème : ici, tous les glyphes ont la même largeur ! L’exemple ci-dessous vous montre les problèmes que cela engendre. Notez l’espacement entre les caractères dans la prévisualisation.

Il est possible de définir des largeurs spécifiques pour chaque caractère, afin d’avoir des lettres collées, et donc plus naturelles. Malheureusement, il faut passer par l’editeur XML (Ctrl + Shift + X).

Dans celui-ci, pour chaque balise <svg:glyph> ayant une taille spécifique, il faut rajouter un attribut horiz-adv-x contenant la largeur exacte du glyphe. La modification n’est pas prise en compte dans la prévisualisation, mais sera bien prise en compte par la suite.

Il est également possible de définir des positionnements spécifiques entre paires de caractères, au cas où, par exemple, une lettre puisse rentrer dans une autre. Pour cela, il faut aller dans l’onglet « Crénage » et sélectionner les éléments de la paire, puis cliquer sur « Ajouter la paire ». Une barre permet alors de définir l’espacement entre ces deux caractères quand ils sont présent l’un à côté de l’autre.

L’affichage de la prévisualisation se met à jour directement pour voir l’effet de la modification. Ici, j’ai diminué l’espacement entre les lettres « T » et « A » afin qu’ils soient collés (dans ce cas, il faudrait également gérer l’espacement entre le « A » et le « T » pour que le mot soit correctement lisible).

Génération des fichiers de fonte

Deux possibilités :

• Utiliser un convertisseur en ligne (http://www.freefontconverter.com/)
• Utiliser FontForge pour générer les formats :
  • Script fontforge

#!/usr/local/bin/fontforge
# Conversion de la font SVG dans les autres formats
Print("Opening "+$1);
Open($1);
Print("Saving myfont.ttf");
Generate("../target-dir/myfont.ttf");
Print("Saving myfont.otf");
Generate("../target-dir/myfont.otf");
Print("Saving myfont.woff");
Generate("../target-dir/myfont.woff");
Print("Saving myfont.svg");
Generate("../target-dir/myfont.svg");
Quit(0);

• Utilisation du script

"C:\Program Files (x86)\FontForge\fontforge" -script convertall.sh myfont.svg

@font-face {
  font-family: "myFont";
  src: url('../font/myfont.woff') format('woff'),
      url('../font/myfont.ttf') format('truetype'), 
      url('../font/myfont') format('svg'), 
      url('../font/myfont') format('otf');
  font-weight: normal;
  font-style: normal;
}
 
[class^="icon-ex-"],
[class*=" icon-ex-"] {
  font-family: "myFont" !important;
  vertical-align: text-top;
}

/* A faire pour chaque icone. */
.icon-ex-myicon:before {
  content: "\f002"; /* Caractère unicode associé à l'icone dans la fonte */
}

<i class="icon-ex-myicon"></i>

.fa-stack {
    display: inline-block;
    height: 1em;
    font-size:1em;
    line-height: 1em;
    position: relative;
    vertical-align: text-top;
    width: 1em;
}

.fa-stack i {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

 Références

Merci tout d’abord à Thomas Decoster pour m’avoir fourni une liste de référence et d’outils sur le sujet.
Une bonne partie des informations sur le fonctionnement dans Inkscape proviennent du site Webdesigner Depot.
Vous pourrez trouver également une liste des termes techniques de la typographie chez Adobe (ca peut toujours servir).