graphical blog 2

Introduction

Le but de ce didacticiel est d’avoir une première approche vers l’édition des fontes vectorielles sous environnement libre, il ne s’agit pas des méthodes pour créer de belles fontes, mais simplement d’une méthodologie de base de création de fonte.

Pour ce didacticiel j’utilise l’éditeur vectoriel SVG Inkscape et l’éditeur de fonte Fontforge. Ce dernier permet l’édition vectorielle de fonte, mais je suis moins à l’aise avec, j’ai eu quelques soucis avec la version que j’ai utilisé (qui n’est pas forcement considérée comme stable), et n’ai pas compris comment résoudre certains problèmes, notament la direction des courbes afin d’avoir une altérnance plein/creux. J’avais également des plantages à la vectorisation de caractéres déssinés en bitmap, ce qu’inkscape fait par contre tres bien.

Description générale de la méthode

La méthode que j’ai utilisé est donc création sous inkscape, importation dans fontforge, puis sauvegarde (dans le format sfd pour pourvoir retravailler) et création de la font truetype pour l’utiliser dans n’importe quelle application, dont Inkscape lui même.

Il est a noter que Fontforge peut importer des tracés vectoriels SVG et exporter des fontes SVG. Inkscape supporte également l’utilisation de fontes SVG.

Création du A majuscule sous Inkscape

contour du A
On commence par tracer la forme exterieure du A, j’ai choisi ici une forme un peu fantaisiste, et ai tenté de me limiter à la taille de la page.

Il y a ensuite 2 méthodes pour créer le trou :

  • Selectionner la courbe exterieure est toujours séléctionée
  • Appuyer sur la touche [Shift] (ou [Maj])
  • Tracer la courbe du trou sans lacher la touche

Cela ne permet pas d’utiliser tous les autres outils désirés, mais peut être suffisant dans le cas de dessin rapide à main levée.


ajout du creux

Création du trou par un second objet :

  • On trace seconde courbe de la taille du trou désiré
  • On passe en mode Séléctionner et transformer les objets (F1)
  • On selectionne la courbe correspondant au trou.
  • En mettenant la touche [Shift] enfoncée, séléctionner la courbe exterieure

Il faut ensuite applique ce que l’on appelle une opération booléenne de différence, qui permet de faire un trou dans un objet, avec la forme d’un autre objet.


apres booleen
Il suffit maintenant de faire Chemin => Différence ([Ctrl]+[-])operation difference pour obtenir le A complet.

Ce a peut être maintenant sauvegarder en SVG (ne pas sauvegarder en SVGZ qui n’est pas supporté par Fontforge) pour l’ importation dans Fontforge.
Menu Fichier =>Enregistrer sous ([Shift]+[Ctrl]+[S]
puis appellez le par exemple A.svg

Nous en avons fini avec Inkscape pour cette première lettre.

Importation du premier caractère dans Fontforge

Lorsque Fontforge est lancé, une fenêtre Ouvrir fonte s’ouvre, il est possible d’en selectionner une à traiter, et se trouvant dans l’arborescence de votre système, ou bien d’en créer une nouvelle en cliquant sur le bouton Nouveau.

Ce ce que nous allons faire.

Fontforge Untitled
Une nouvelle fenêtre s’ouvre alors avec comme titre Untitled1 Untitled1.sfd(ISO8859-1), cette fenêtre contient une grille comprenant l’alphabet latin avec les caractères accents les plus courant dans les langues pratiquées en Europe de l’Ouest, et quelques symboles à usage courant.
Pour la barre de titre :

  • Untitled signifie sans titre, c’est le nom donné a la fonte qui sera inclus dans le fichier.
  • Untitled-1.sfd est le nom du fichier de fonte lui même, au format de Fontforge.
  • ISO8859-1 est l’encodage de caractère normalisé par l’ISO pour les caractères de l’Europe de l’Ouest.

Il est à noter que :

  • l’encodage ISO8859-15 permet l’utilsation du symbole euro ( € ).
  • L’encodage UTF-8 permet de réunir dans une seule fonte la majoritée des dizaines d’écritures de la planète (langues à écritures latines, cyrilliques, sémites(arabe, hébreu), d’Extrême Orient (Chine(s), Japon, corée), d’Asie du Sud-Est (Laos,Cambodge,Thaïlande,Vietnam,…) d’Asie du Sud (écritures indiennes, sri lankaise, etc…), des américains natifs (inuktitut, cherokee, etc…).

la page de garde de wikipedia français est un bon exemple du mélange des langues que l’on peut faire dans en UTF-8. Descendre en bas de page, à la séction intitulée « Wikipédia dans d’autres langues ».

Fontforge Untitled
Mais revenons à nos moutons, en commençant par sélectionner le caractère « A » majuscule en double-cliquant sur la case le représentant.

Une nouvelle fenêtre s’ouvre alors representant le cadre du caractère A avec en titre

C’est la fenêtre d’édition de caractèré avec en titre de fenêtre le caractère en cours d’édition, par exemple, ici :
A (65) venant de Untitled1 LETTRE MAJUSCULE LATINE A
Signifiant que c’est le caractère A reperé par le code 65 dans la fonte initulée « Untitled1 » (Sans Titre1).
Sa déscription est « Lettre majuscule latine A »

Il faut maintenant importer le fichier SVG du A en faisant pour cela :
Fichier=>importer, une fenêtre s’ouvre, il s’agit d’un sélécteur de fichiers, selectionner le type SVG (à la place de bitmap), puis le ficher A.svg sauvegardé précédement.

Une nouvelle fenêtre s’ouvre, intitulée « Interpr » , cocher les 3 cases.

Edition A
Comme on voit le A est aligné en bas de la fenêtre, le trait du bas, qui arrive aux boucles du A est la « ligne de base » celle ou sont posée les lettres, en dessous, la partie où dépassent ce que l’on appèlle communément les « queues » est la Hampe, et ou doivent se trouver les a,c,e,o… l’œil.

Voir pour la terminologie, dans le wikipedia, caractère et œil.

Il faut donc remonter ce caractère, de façon à ce que sa base soit sur la ligne de base, et qu’il se termine un peu en dessous de la ligne situé vers le haut de la case, sur une ligne que l’on appellerait « haut de talus ».

A en place
Pour cela, double-cliquer sur la courbe, ou faire [Ctrl]+[A] (tous les noeuds deviennent jaune), puis deplacez la fonte en cliquant sur un noeud jaune puis sans lacher le bouton, deplacant le caractere.
Il faut également laisser un peu d’éspace avec la ligne de gauche, puis deplacer la ligne de droite afin d’en laissé également à droite. On obtient donc, l’image que vous voyez à droite.

Vous pouvez sauvegarder votre fonte avec votre 1er caractère. (A noter que le menu Vue=>Noircir permet de verifier que le remplissage se fait correctement).

Pour sauvegarder : faites Fichier => Enregistrer sous..., cela permet de sauvegarder un fichier sfd pour un travail utliérieur.

Generer TTF
Pour générer une fonte TrueType pour l’utiliser dans le système, faire :
Fichier => Générer fonte(s) ([Ctrl]+[Shift]+[G])
Dans la nouvelle fenêtre :

  • Séléctionner True Type à gauche.
  • Selectionner Aucune fonte bitmap à droite.
  • Taper le nom de la fonte.
  • Cliquer sur Enregistrer pour sauvegarder

La fonte crée doit ensuite être copiée dans /usr/share/fonts/TTF ou bien /usr/X11R6/lib/fonts/TTF/
fc-cache doit être éxecuté pour mettre à jour le cache de font de fontconfig.

Il suffit maintenant de demarrer (redemarrer) une application pour avoir le supporte de cette nouvelle fonte. Si des caracteres n’éxistent pas ils seront remplacés par ceux d’une autre fonte, c’est du moins ce qui se passe dans Inkscape. Le nom de la fonte dans les selecteurs de fontes des applications sera « Untitled ».

Pour aller plus loin:

J’essairais de corriger les erreurs et d’apporter des compléments à ce didacticiel des que possible.

18 Comments »

  1. c’est génial ! on peut facilement maintenant s’inventer son écriture manuscrite pour écrire de vrai fausses lettre de motivation a mano :))

    Comment by yemanja — %AM %390 %CET%q, %2005 @ %1:%Aug %p

  2. Bonjour / bonsoir ;

    Je veux créer une fonte arabe avec des glyph additionnels, je n’ai presque pas de problèmes du côté de la création des formes dedites glyphes, mais je ne sait nullement comment “programmer” (désolé; je ne trouve pas de mot plus adéquat!) ces glyph afin que les programme puisse les reconnaitre étant des formes spécifique de lettres déjà connues.
    Je vous saurrais vraiment gré de toute aide utile à ce propos.

    NB/
    - Je ne suis que simple utilisateur de l’outil informatique.
    - Je n’est que quelques notions en langue anglaise.
    - Je travail sous Windows

    Merci d’avance

    Comment by Atman — %PM %773 %CET%q, %2005 @ %1:%Aug %p

  3. Atman :
    Inkscape fontforge sont disponible pour les OS non-libres également, meme si ce dernier est moins simple à installer sur ces systèmes et généralement moins performants, que sur des systèmes libres. Je conseillerais plutôt de tenter une distribution Linux, peut être par un LiveCD, qui permet d’utiliser Linux, sans installer sur disque dur, ou en ne reservant qu’un petit espace de travail dans un premier temps, cela permet génèralement de fair le premier pas et de retirer des frayeurs liées à sa réputation.

    Framasoft est un bon site pour les portages de logiciel libre sur votre système et en français.

    Linux ou les *BSD ont l’avantage de gérer aussi bien l’arabe que le chinois, que les langues européennes répandues sur un même système. Les méthodes de saisies s’adaptent de plus mieux aux différents claviers (SCIM est certainement le plus souple). Donc, sur un système en Français vous pourriez faire tourner des application en arabe et reciproquement. Dans le meme fichier texte pouvoir ecrire de gauche à droite en japonais ou polonais, et de droite à gauche dans une langue indienne, en persan ou en arable, par ex.

    Enfin, si ce n’est que pour disposer de fontes arabes, il en existe par défaut sur ces systèmes. Vous pouvez en trouver des domaines publiques ou libres sur différents sites spécialisés, en cherchant un peu. Je donne quelques liens à ce propos dans la page de liens sur les didacticiels graphiques.

    J’éspere que tous ces renseignements vous aiderons dans votre démarche.

    Comment by Administrator — %AM %017 %CET%q, %2005 @ %1:%Aug %p

  4. Salut à tous,
    C’est le seul tuto en français quie j’ai trouvé pour fontforge. Merci beaucoup.
    Je cherche à faire une fonte mais je ne comprends pas l’utisation des traits de repère horizontaux ( je n’en connais pas le nom, traits gris ). Comment les déplace-t-on vers le haut ? Est-ce possible ?

    Comment by alcidi — %PM %504 %CET%q, %2006 @ %0:%Jan %p

  5. Mille mercis pour vos explications.
    Je cherchais depuis longtemps un moyen de générer mes propres fontes, et je l’ai trouvé ici.
    J’ai amélioré le procédé en utilisant l’outil ‘calligraphique’ d’InkScape. Cela nécessite cependant une petite manipulation supplémentaire : il faut faire une copie en bitmap, puis vectoriser ce bitmap. On évite ainsi l’apparition d’artefacts indésirables quand on visualise ces fontes en grandes tailles ou qu’on les utilise en VML (les zones de superpositions du traçé n’ont plus alors cet effet ‘négatif photo’ car on travaille uniquement sur les contours).

    Ceci dit, peut-être fais-je quelque chose de compliqué et qui est peut être intégré à InkScape, mais je viens de découvrur ce programme et je ne trouve aucune documentation détaillée sur toutes les fonctions offertes dans les menus.

    Comment by LE GUENNOU — %PM %544 %CET%q, %2006 @ %0:%Feb %p

  6. Il faut aller dans le menu Aide. Il y a notamment 7 didacticiels progressifs et interactifs, et une fiche de rappel des raccourcis clavier.

    Tout à fait d’accord pour remettre au propre les vecteurs avec des mauvais artifices en utilisant =>bitmap=>vectorisation. J’emploie la même méthode j’avais suggéré aux développeur de faire un raccourci mais je crois que ça n’est pas dans les priorités, le chemin est long pour que le logiciel soit complet bien qu’il ai déjà des tas de fonctionnalités très intéressantes.

    Comment by Administrator — %AM %054 %CET%q, %2006 @ %0:%Feb %p

  7. Merci pour ce tuto.
    J’avais déjà trouvé mais il m’a quand même été utile.
    Je cherche un tuto plus generale sur fontforge.
    Je l’utilise pour l’instant sous windows xp.
    Le look n’est pas supert mais cela fonctionne bien.
    Mais il faut le vouloir vraiment pour l’installer.

    Comment by jebu — %PM %764 %CET%q, %2006 @ %0:%Feb %p

  8. Merci pour le tutoriel, cependant je suis un peu frustré car dans le menu importer de Fontforge je ne trouve que trois options: image, Xfig ou EPS. Faut-il utiliser une version plus récente ?

    Comment by BlueTak — %AM %447 %CET%q, %2006 @ %1:%Aug %p

  9. Bluetalk : je n’ai pas une version très recente (ce poste à un an environ), ca doit être un problème de dépendance de librairie ???

    Comment by Administrator — %AM %053 %CET%q, %2006 @ %1:%Aug %p

  10. Je viens de créer une fonte, merci de vos indications mais je m’arrête à :
    La fonte crée doit ensuite être copiée dans /usr/share/fonts/TTF ou bien /usr/X11R6/lib/fonts/TTF/
    fc-cache doit être éxecuté pour mettre à jour le cache de font de fontconfig.

    Là, je ne comprends plus ce qu’il faut faire … Où copier et comment exécuter fc-cache?

    Comment by baudoin — %PM %965 %CET%q, %2006 @ %0:%Dec %p

  11. Baudoin : Ces explications sont pour Linux (mais fonctionnent sur tous les UniX globalement à priori).

    Copier dans les répertoire cités, et executer la commande dans un shell ou dans le raccourci pour executer des commandes de l’interface du bureau.

    Comment by Administrator — %AM %039 %CET%q, %2006 @ %0:%Dec %p

  12. Bonjour,

    J’ai installé Fontforge sur Ubuntu. Cela m’a l’air plus simple que je ne le craignais. Mon objectif n’est pas de créer des polices (trop dur pour moi) mais plutôt de mettre des accents sur des polices déjà créées par plus talentueux que moi.
    Malheureusement, je cale sur une qui pourtant me plait beaucoup. Lorsque je l’ouvre, elle est au format Macintosh Latin. Et ce qui est plus ennuyeux, la plupart des Glyph sont bloqués (ils contiennent un simple carré et toute modification est impossible). Bref, malgré toutes mes manips, les glyph des caractères accentués n’apparaissent pas.
    Comme 80% des commandes sont dans un anglais que je ne comprends pas, je suis bien ennuyé… Une idée sur ce que je pourrais faire ???

    Comment by Tathume — %AM %145 %CET%q, %2008 @ %0:%Feb %p

  13. Quelle est le nom de la police, où peut on la trouver ? Il va être difficil de corriger le problème sans ces informations.
    Je pense qu’il faudrait également verifier que le fichier est bien accessible en écriture a l’utilisateur lançant fontforge, ou eventuellement le sauvegarder dans le format natif de fontforge pour le manipuler.

    Comment by Administrator — %AM %055 %CET%q, %2008 @ %0:%Feb %p

  14. Un immense merci !!!
    on peut enfin faire la police qu’on désire facilement et gratuitement! MERCI

    Comment by Juan Max — %AM %968 %CET%q, %2008 @ %1:%Oct %p

  15. Bonsoir et un grand merci aussi pour ce texte qui reste le seul document en Français à ma connaissance !

    J\’ai fait moi aussi une police avec Inkscape et FontForge. La construction s\’est bien passée jusqu\’au moment de l\’exportation en TTF. plusieurs types d\’erreurs apparaissent qui ont été plus ou moins auto-corrigés par FontForge mais le programme trouve encore des chemins qui se croisent. Je soupçonne qu\’il s\’agisse en fait de points qui se superposent (pour clore des cercles). Si je supprime l\’un des points la forme s\’ouvre ce qui ne me convient pas. Si je fusionne les points, le point résultant n\’est plus \

    Comment by AirW — %PM %854 %CET%q, %2010 @ %1:%Sep %p

  16. – (Suite) –
    n’est plus “porteur de vecteur” (désolé, je ne sais pas comment l’expliquer autrement) et il se trouve déplacé de sorte que le cercle se trouve complètement déformé.

    Il me semble que la fusion serait pourtant la solution, mais il faudrait que le point résultant se trouve le plus près possible des emplacements d’origine.

    Comment faire, docteur ?

    Merci encore,

    AirW

    Comment by AirW — %PM %860 %CET%q, %2010 @ %1:%Sep %p

  17. Bonjour ! Je relance un peu la machine !

    Les erreurs citées plus haut ont des conséquences différentes selon l’OS et/ou le logiciel utilisé.

    A l’origine la police est destinée au logiciel MuseScore qui peut générer entre autre des png et des pdf.

    Les défauts repérés sont de 2 ordres :
    - les glyphes se dédoublent dans les pdf générés sous Windows.
    - Dans les png, les cercles sont déformés : l’un des nœuds correspond à un point d’inflexion au lieu de présenter une jonction lisse.

    Ces défauts n’apparaissent pas lorsque la police est utilisée avec OOo par exemple.

    Ma question est : Maintenant que je me suis mieux exprimé (je crois), quelqu’un peut-il me dire où aller chercher de l’aide ?

    Encore une fois, on constate que l’information n’est pas facile à trouver et que le sujet est un peu la chasse gardée des professionnels, ce qui se comprend un peu car c’est un domaine très pointu.

    Merci !

    Comment by AirW — %PM %645 %CET%q, %2011 @ %0:%Jan %p

  18. Bonne nouvelle pour toi AirW, une nouvelle version de Fontforge est sorti, elle a l’air de corriger tout un tas de bugs, esperons que ça corrigeras ceux que tu rencontres :
    FontForge 20110221 sur libregraphicsworld.org

    Comment by Administrator — %AM %002 %CET%q, %2011 @ %0:%Feb %p

RSS feed for comments on this post. TrackBack URL

Leave a comment

You must be logged in to post a comment.

Powered by WordPress

Switch to our mobile site