Updated 16.08.2020: Please visit this post for an update for newer and better ways to create your fonts with Inkscape.
I previously posted a simplified solution for using Inkscape to paste multiple svg paths into svg glyphs to create an svg font which again could be converted to an ttf font using FontForge. I have sofisticated this process (pretty much I’d say) and here comes the new recipe. It still has some issues to work out, but I find it presentable now. Thanks to cleversomeday getting me started by showing that it was possible to create fonts with Inkscape and for being an active test-user so that I am able to discover bugs to fix.
So – we start with the svg file fontStarter. This file already have some example paths. Play with these or remove them to put your own paths in. The example paths show a single line font, but this extension would work also for more “normal” outline fonts.
- Design or paste your paths here and make sure they rest on the baseline.
- You may move the other guides, but keep the baseline where it is.
- The paths will be sorted by the minimum x-position of their bounding boxes so the glyph order will be defined by this.
- Make sure the paths are not grouped.
- If two or more paths build one glyph (like in the character “i”), make sure you combine these paths (Ctrl+K) to one before running the extension. Or else you will have the dot in one character and the stem in the next and it will all be corrupted.
- If the boundingbox of one path stretches to the left of the path that is supposed to be the previous glyph you will have problems. Typically the descender of a j extening to the left og the previous i. Fix this by separating these paths so that the minimum x-position fits the path order.
- If you want a single line open path font: Be aware of paths you want to keep closed if they contain straight lines: make sure the path is closed before you start. Or else it will not open at the correct places when you use the re-open path extension.
- If you are making a “normal” outline font make sure the outer path is going clockwise and the inner path(s) are counterclockwise or else FontForge will do strange things.
- I’ve seen that some special characters do not work very well so that will be work in progress. A temporary fix will be to design the paths with special characters at the end (highest x-positions) and let the text-string not contain these characters. Then after running the extension you will find glyphs in the svg code without a unicode defined. Add the unicode you want there or define it in FontForge. Doubleclick the glyphs marked with a red questionmark and choose Element – Glyph Info. Write the character if possible or the unicode “u+” and unicodenumber. In the latter case press the Select from Value button to fill in the rest. Here is one table of specialcharacters and their unicode.
- Download convertToSvgFont.inx and convertToSvgFont.py. Place it in the Inkscapeshareextension folder. Restart Inkscape and you will find the extension Typography-> Convert selected paths to svg-font
- Write the glyphorder as a string into the extension or copy/paste it from the textstring prepared in the fontstarter file. Name your font (can be edited in FontForge).
- The extension will:
- order the paths according to the minimum x-position and link one by one to the glyphs in the string provided to the extension
- the paths will be maximized within the svg-page
- and flipped upside down as it turns out that is how it works
- if you are creating a single line open path font the paths to be kept closed is prepared to tolerate the re-opening process. Paths ending with a curve will have the first node copied to the last. Paths ending with straight line will have the last line curved to trick the object to path function to leave the path closed after the re-opening process.
- All paths will be closed as the ttf demands closed paths as discussed before. You can choose whether you want the glyphs to start at zero at the bounding box or move zero to the maximum of the bounding box of the previous glyph. This will help you get the left bearing a quickstart if you do not want to spend a lot of time on kerning in FontForge.
To verify that the extension did its job and that you have followed all the steps correctly:
- Go to Edit > XML Editor
- Locate the svg:defs > svg:font > svg:glyph
- The first glyph should have a parameter d as blank (this is the space-glyph)
- For the next glyphs in the list: Look for a defined path (text-string starting with M and then numbers and some other letters as shown in the red box below).
Now save the svg-file and open it in the newest version of FontForge.
- Adjust the right bearing by selecting all glyphs, Metrics – > Set Rbearing. Set the Rbearing to zero if you want the glyphs to attach.
- Adjust the space glyph (first with an cross). Drag the vertical bar to set the width of the space glyph (for example the same width your a-glyph).
- To get baseline at 0: Select all glyphs Ctrl+A and go to Elemtents – Transformations – Transform – Move Y -200
- You can edit the name of your font in Element -> Font info
- File -> Generate Font
- Some errors may be ignored – just continue. And you have your own font.
- Doublclick the .ttf file and install the font.
- PS: Windows/Inkscape issue when reinstalling after editing described here.
- Restart Inkscape to be able to use the newly installed font.
Here I have installed the font. And written in Inkscape. It is a single line font so it looks weird until I open the paths. First line is text filled, no stroke. Second line is text, no filling, stroke. Third line is text converted to paths, ungrouped and reopened by reopenSingleLineFont