I previousely gave you the Cutlings Singularis, Dualis and Pluralis single line SVG font with the corresponding TTF lookalike single line fonts. I realized that on close up, the TTF fonts was not as good as the original svg single line font so I had to do some optimizing. The download link in the original post is updated with the optimized version 2 of the TTF fonts. I give you my lessons learned on how to convert a (single line) SVG font to TTF (the latter steps will apply to outline fonts too).
Why TTF in addition to SVG-font?
My main goal is to have true single line fonts as SVG, but it is beneficial to have the corresponding TTF font. I’ll give you two reasons:
- The Hershey Text extension will automatically select the single line SVG font with the same name as the TTF font used for the text object (as long as you have specified the path of your single line SVG fonts in the extension).
- You can use font manager/viewers like f.x. NexusFont to keep track of your single line fonts by viewing the corresponding TTF font with the same name.
From single line to outline
How to make an outline font that looks like your true single line SVG font created in Inkscape wiht the Custom Stroke Font extension:
- Hide the template layer (see image below)
- Select all (Ctrl + A)
- Make sure all paths have the same stroke style/width (or different if that is what you want)
- Convert the lines to outlines: Path – Stroke to Path
Now the tedious part:I’ve fixed this with an extensionOpen the XML editor (Ctrl+Shift+X)For each glyph path – rename id equal to the glyph
- Extension – Custeom Stroke Fonts – Generate Font Data
- Fix hex codes like I have described in another post.
What I did wrong
My first attempt to convert from SVG to TTF had some issues with the accuracy in addition to the fact that I had failed verifying that the stroke style of the single line font was consistent (see image below). I’m not fully certain which step of this fix is the most important, but I will give the list of my steps to get a good result and I believe most of the steps are partly involved with the success.
TTF fonts will round all coordinates to integers and then the glyphs have to be large enough so that the rounding do not affect the visual. It seems that OTF can handle decimals, but I did not test that.
You can create the template with 1000 as glyph size or you could also fix it in FontForge if you already have worked on your template.
From SVG to TTF with FontForge
These steps are partly found in the handbook on FontForge. I still had some warnings when generating the font after following the steps, but the fonts looked like expected when tested so I accepted the warnings. (If you are going to do this many times I would recommend a script to automate the process.)
- Open your SVG font in FontForge.
- Select all glyphs (Ctrl + A).
- Check or fix the size. Element -> Font info… -> General. Set Em Size to 1024 (if you want a ttf font or 1000 if you want a OTF font). The glyphs will be resized when you press OK.
- Correct direction (Ctrl+Shift+D) or Element -> Correct Direction
- Convert all paths to quadratic curves. Element -> Font Info -> Layers – All layers quadratic – OK
- All coordinates to integer coordinates (Ctrl + Shift + _) or Element -> Round -> To Int
- Now you can generate the TTF or OTF font (Ctrl + Shift + G).