{"id":983,"date":"2014-03-24T19:42:45","date_gmt":"2014-03-24T19:42:45","guid":{"rendered":"https:\/\/simonertel.net\/blog\/?p=983"},"modified":"2026-04-26T06:37:09","modified_gmt":"2026-04-26T06:37:09","slug":"create-your-own-font-entirely-and-for-free","status":"publish","type":"post","link":"https:\/\/simonertel.net\/blog\/en\/create-your-own-font-entirely-and-for-free\/","title":{"rendered":"Create your own font entirely and for free"},"content":{"rendered":"

Today, integrating a specific typeface onto a web page has become easy. The temptation, for many reasons, to create your own font is strong. In my case, let\u2019s be completely honest, it started as a good ego trip: the ego trip of seeing my own handwriting usable however I wanted, in every software I wanted, just like that! One could go on at length about the reasons for creating your own font, since there are fortunately many others, but that is not the point here. Creating your own font is within reach of the first fool who comes along, since I managed it<\/a>! And it can be done for free. And that is the experience I\u2019m going to share in this article!<\/p>\n

\n
\"Create<\/a>

Create your own font!<\/p><\/div><\/p>\n

<\/p>\n<\/div>\n

Create your font<\/h2>\n

First of all, you need to distinguish fonts with ligatures and those without, since my font has no ligatures (connections between characters). That makes things quite a bit easier!
\nIf the font you want to create starts from a real handwritten version (like mine), you\u2019ll need to write out the entire alphabet and scan it! The first version will therefore be a raster image (or bitmap). Don\u2019t hesitate to scan at a fairly high resolution (or draw your letters a little larger to avoid the ink wandering on the paper). But if you want to create your own font directly on the computer, use vector software directly (Inkscape, Illustrator, etc.).<\/p>\n

Each character will need to be worked on independently. In typography, each character is called a \u00ab\u00a0glyph\u00a0\u00bb. The standard Latin alphabet consists of 26 characters that we all learn at school. But as soon as you want to take into account \u00ab\u00a0accented\u00a0\u00bb or \u00ab\u00a0ligature\u00a0\u00bb characters, know that French already includes 42 glyphs. And, of course, if you\u2019re a filthy perfectionist like me and want to go all the way, you can also add lots of \u00ab\u00a0other\u00a0\u00bb characters, such as punctuation, mathematical characters (1, 2, +, -, <, >, %), or currencies (\u20ac, $)… And, finally, staying within Latin characters, know that there are still other special characters depending on the country! + the uppercase letters after that…<\/p>\n

In short, creating a typeface that includes every possible character only requires your patience as a limit! Good luck, because in the end, it\u2019s fun!<\/p>\n

Pan(ta)gram<\/h2>\n

If you want to list the characters, there is a simple trick called a \u00ab\u00a0pangram\u00a0\u00bb. Like me, you may not have known the name, but we\u2019ve all seen them! When a font is installed on a system, most operating systems display one! It\u2019s a sentence containing all the \u00ab\u00a0glyphs\u00a0\u00bb of a language. In French, it gives: \u00ab\u00a0Portez ce vieux whisky au juge blond qui fume\u00a0\u00bb, in a version with \u00ab\u00a0non-accented characters\u00a0\u00bb. Otherwise, with accented characters, it gives: \u00ab\u00a0D\u00e8s No\u00ebl o\u00f9 un z\u00e9phyr ha\u00ef me v\u00eat de gla\u00e7ons w\u00fcrmiens je d\u00eene d\u2019exquis r\u00f4tis de b\u0153uf au kir \u00e0 l\u2019a\u00ff d\u2019\u00e2ge m\u00fbr & c\u00e6tera !\u00a0\u00bb.
\nYes, the French language contains the letter \u00ff! If you want to extend your alphabet to particular foreign languages, referring to the translated pages of the Wikipedia article was my method: \u00ab\u00a0pangram<\/a>\u00a0\u00bb proves to be very helpful.<\/p>\n

Vectorization, captain<\/h2>\n

Well done, you\u2019ve just scanned your little scribbles! Now you need to vectorize<\/strong> them. Nothing monstrous about that. You can do it via Illustrator<\/a>, or if you want only free software (and legal stuff, hehehe :s), via Inkscape<\/a>! No special constraints: black and white, no halftones. So make sure to work on the bitmap beforehand by increasing the contrast, and see whether it doesn\u2019t damage your handwriting too much. If you vectorize in Illustrator, you\u2019ll need to export your file in SVG<\/strong>.<\/p>\n

The font file<\/h2>\n

Here, I didn\u2019t invent anything either; I just followed this excellent tutorial<\/a>. It explains that Inkscape is perfectly designed and thought out for creating a font, and even comes with a sample file! However, you will only be able to export your font from Inkscape as SVG<\/strong>. After that, nothing too terrible: you carry out, like a laborious drudge, the tedious task of copy-pasting letter by letter, entering the corresponding info, and getting used to the Inkscape interface where, sadly, everything is not entirely intuitive!<\/p>\n

\"Inkscape,<\/a>

Demonstration of the font copy-paste<\/p><\/div>\n

But once you\u2019ve learned the first mechanisms, nothing too tricky. Don\u2019t be afraid to let the letters extend beyond the frame; they will still appear whole in the end! Don\u2019t worry about the letter spacing either; that step comes later, and it\u2019s easier to handle in the next software. Finally, if you don\u2019t understand why, when you add a letter made of two shapes after having used \u00ab\u00a0Get curve from selection\u00a0\u00bb, only one of them is taken into account, don\u2019t panic, that\u2019s normal: you need to use \u00ab\u00a0Path\u00a0\u00bb > \u00ab\u00a0union\u00a0\u00bb, and then it will work!<\/p>\n

\"Inkscape<\/a>

Screenshot of Inkscape with composite letter<\/p><\/div>\n

Save<\/h2>\n

Don\u2019t hesitate to save regularly! An accident can happen so quickly… ! In the tutorial linked above, you\u2019ll see that Inkscape allows you to define \u00ab\u00a0kerning<\/a>\u00ab\u00a0, that is, letter spacing. But I recommend doing that later with FontForge.<\/p>\n

What\u2019s going on, we\u2019ve lost control of the Inkscape shuttle!<\/h2>\n

You saved your SVG (\u00ab\u00a0mafontquidechire.svg\u00a0\u00bb), went to get your coffee, and your Windows crashed. Bang. No worries, you tell yourself, you\u2019ve saved the font! You launch Inkscape and reopen your SVG file. Except now, it\u2019s a disaster: you can clearly see the glyphs in the associated window, but you can no longer edit them! That\u2019s \u00ab\u00a0normal\u00a0\u00bb in the sense that the font implementation in Inkscape is still relatively recent, and the developers are working hard to improve things, as you can see here<\/a>. For now, Inkscape is only intended for the creation\/design stage, and only provides SVG export.<\/p>\n

Into the big leagues<\/h2>\n

Don\u2019t panic! Your file is actually fully usable! You just need to open it with the right software! Namely FontForge in this case (though there are other programs, but most are paid, and since that\u2019s not the topic of the article…).
\nYou\u2019ll need to refine, normalize, and work on your little SVG to generate a TrueType<\/a> typeface (.ttf). To do this, you\u2019ll need to download and install FontForge<\/a> (to learn more about the creator<\/a>).<\/p>\n

The glyphs<\/h2>\n

The FontForge interface has two main panes: the list of all glyphs, and the editing area for each glyph you choose to focus on.<\/p>\n

\n
\"Screenshot<\/a>

My character set in FontForge.<\/p><\/div>\n<\/div>\n

Here too, I\u2019ll let you discover the software for yourselves. But since I\u2019m not entirely ungrateful, here are a few tips that may be useful:
\n– Work directly by groups of letters; it\u2019ll go faster. To do this, select the glyphs simply by clicking and dragging on the interface. Then you\u2019ll have a whole bunch of commands that allow you to standardize the characters;
\n– Metrics > left \/ right side bearing > allows you to apply uniform spacing values on each side of each letter.
\n– Element > Round > allows you to round the coordinate values of each letter\u2019s B\u00e9zier curves, making them saveable for TTF export.
\n– Element > Correct direction > allows you to correct, point by point, imperfections in the paths generated by Inkscape.
\nYou\u2019ll often need to use the Element > Validate function before exporting your font.
\nHere too, a long-term effort awaits you; you\u2019ll end up with many error messages and various validations that I won\u2019t list here. But it\u2019s worth the effort.<\/p>\n

Epilogue<\/h3>\n

If you\u2019ve managed to export your font in .ttf, then all that\u2019s left is to use it wherever you like, and convert it as needed if another format is required, via the multitude of existing online tools. Such as Font Squirrel<\/a>, one of the oldest around (but it requires Flash)
\nIf you want to add letters to your character set, you can always draw the letter in Inkscape and import it into FontForge as explained by this tutorial<\/a>.<\/p>\n

Finally, if you want to see what the font set I created looks like, here it is again<\/a>.<\/p>\n

I hope this was useful to you!<\/p>\n","protected":false},"excerpt":{"rendered":"

Today, integrating a specific typeface onto a web page has become easy. The temptation, for many reasons, to create your own font is strong. In my case, let\u2019s be completely honest, it started as a good ego trip: the ego trip of seeing my own handwriting usable however I wanted, in every software I wanted, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-983","post","type-post","status-publish","format-standard","hentry","category-non-classe-en"],"_links":{"self":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/comments?post=983"}],"version-history":[{"count":1,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/983\/revisions"}],"predecessor-version":[{"id":984,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/983\/revisions\/984"}],"wp:attachment":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/media?parent=983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/categories?post=983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/tags?post=983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}