Créer une police Web avec Glyphs Mini
Alors, vous avez créé une police avec Glyphs Mini et vous voulez l’afficher sur une page Web? C’est aussi facile que d’appuyer sur un bouton.
Afin de créer une police Web, vous aurez besoin d’un fichier avec le suffixe .woff ou .woff2. WOFF, c’est quoi déjà? Il s’agit du ‘Web Open Font Format’, soit le format Web Open Font (WOFF), qui est un format de police utilisé pour les pages web. Il a été développé en 2009 par Erik van Blokland, Tal Leming et Jonathan Kewand et il est maintenant une recommandation du World Wide Web Consortium (W3C). WOFF est essentiellement un format OpenType ou TrueType avec en plus de la compression et des métadonnées additionnelles. WOFF2 une variante de WOFF, serait plus performante et compressée davantage. Vous pouvez vérifier quels navigateurs Web supportent WOFF et WOFF2, et vous verrez que tous les navigateurs récents s’en sortent plutôt bien.
Pour exporter votre police sous le format WOFF, sélectionnez Fichier > Exporter (Cmd-E) puis choisissez le type de fichier Police Web (WOFF). Glyphs Mini exportera un fichier WOFF, et, à partir de la version 2.1 et plus récentes, un fichier WOFF2.
(image: webfont1.PNG class:shadow)
Vous pouvez choisir de faire le hinting automatique de votre police, si vous le désirez. L’option Hinting automatique applique l’algorithme de hinting automatique AFDKO à tous les glyphes qui n’ont pas reçus de hints manuels. Cette option s’attend à ce que les épaisseurs des traits et les zones d’alignement soient définies correctement, assurez-vous donc d’avoir les bonnes mesures dans vos Informations de police (Cmd-I). Décochez cette option pour les polices qui ne doivent pas avoir de hinting, ou encore pour accélérer l’exportation lorsque vous voulez simplement faire des tests sur votre police.
L’option Supprimer le chevauchement applique un algorithme afin de supprimer les chevauchements de tracés au moment de l’exportation, de façon semblable au filtre Supprimer le chevauchement. Vous pouvez désélectionner cette option lors de tests, afin d’accélérer l’exportation ou encore si vous avez déjà supprimé les chevauchements dans votre fichier.
L’option Destination de l’exportation vous permet de définir un emplacement par défaut dans lequel les polices seront exportées. Si vous ne définissez pas une destination, Glyphs Mini fera surgir un dialogue de sauvegarde. Mais faites attention, exporter votre police écrasera toutes instances antérieures du même nom qui se trouve dans le même emplacement. En fait, cela peut vous être utile si vous utilisez le dossier Adobe Fonts comme destination de l’exportation.
Le but principal ici est de maintenir la taille du fichier aussi petite que possible. Pour commencer, assurez-vous que vous exportez seulement les glyphes que vous voulez afficher. Pour cela, pour chacun des glyphes que vous ne voulez pas exporter, décochez l’option Exporter du menu contextuel en mode Édition, ou encore dans la barre latérale en mode Police.
(image: webfont2.PNG) (image: webfont3.PNG class:shadow)
En mode aperçu Police, les glyphes non exportables seront affichés avec une diagonale rouge barrant la case du glyphe.  (image: webfont4.PNG)
Vous pouvez également vous assurer d’utiliser aussi peu de nœuds que possible dans vos glyphes.  (image: webfont5.PNG)
Afin d’apprécier votre fichier WOFF en action, vous aurez besoin de code HTML et CSS pour faire votre test.
Vous pouvez tester votre police dans votre navigateur en copiant-collant ce qui suit dans un éditeur de texte en clair de votre choix (TextMate, SublimeText, Atom, ou TextWrangler sont des choix populaires):
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>your font</title>
<style type="text/css" media="screen">
@font-face { font-family: 'yourfont-Regular'; src: url('yourfont-Regular.woff'); }
body {
font-family: "yourfont-Regular";
font-feature-settings: "kern" on, "liga" on;
-moz-font-feature-settings: "kern" on, "liga" on;
-webkit-font-feature-settings: "kern" on, "liga" on;
-ms-font-feature-settings: "kern" on, "liga" on;
-o-font-feature-settings: "kern" on, "liga" on;
}
p { padding: 5px; margin: 10px; }
p#smallParagraph { font-size: 12pt; }
p#largeParagraph { font-size: 32pt; }
p#veryLargeParagraph { font-size: 100pt; }
</style>
</head>
<body>
<p id="smallParagraph">abcdefghijklmnopqrstuvwxyz</p>
<p id="largeParagraph">abcdefghijklmnopqrstuvwxyz</p>
<p id="veryLargeParagraph">abcdefghijklmnopqrstuvwxyz</p>
</body>Dans le code HTML, remplacez toutes les instances yourfont avec le nom de votre police. Sentez-vous libre d’éditer le CSS et d’opter pour les corps de police que vous souhaitez afficher. Si vous voulez afficher tous les glyphes exportables de votre police, voici un truc: ajoutez un Filtre futé dans Glyphs Mini en cliquant sur la roue dentée dans le coin en bas à gauche en mode aperçu de Police. Ajoutez deux règles à votre nouveau filtre: Possède un Unicode et Exporter le glyphe. Sélectionnez l’option Oui pour les deux.
(image: webfont6.PNG class: shadow)
Dans la barre latérale, sélectionnez le filtre que vous venez tout juste de créer. Sélectionnez ensuite tous les glyphes affichés dans l’onglet Police et choisissez Édition > Copier (Cmd-C), puis collez-les ensuite dans votre fichier de texte au lieu de abcdefghijklmnopqrstuvwxyz. Sauvegardez le fichier dans le même dossier que votre WOFF en lui attribuant un suffixe .html:
Faites ensuite glisser le fichier dans une fenêtre de navigateur, et voilà:
Il existe quelques sites Web qui vous permettent de tester votre police en ligne. Nos favoris sont:
- Wakamai Fondue du designer et codeur hollandais Roel Nieskens
- Font Drop du designer allemand de police de caractères Viktor Nübel et son frère Clemens Nübel
Il vous suffit de faire glisser votre fichier WOFF et de jeter un coup d’œil à votre police Web. Si vous repérez une erreur dans votre police, réparez-la dans Glyphs Mini et exportez-la à nouveau. Actualisez ensuite les pages tests et vous devriez voir la version mise à jour de votre police.
Amusez-vous bien!