Inverted glyph: bitmap > SVG via autotrace > glyph via fontforge

Question

I am trying to create a font/glyph by:

• taking a bitmap image
• creating an SVG with autotrace (on Linux)
• importing the outline as a glyph with python-fontforge (glyph.importOutlines(svgfile) )

This works fine except that the resulting glyph in inverted (see images). Any idea how this can be prevented, how the SVG or glyph can be inverted, or anything like that?

Source bitmap:

Autotraced SVG:

Resulting font:

Cobbett

Answer 1

solved this simply by using potrace instead of autotrace.

for reference, these are the steps:

convert bitmap to svg (linux command line):

potrace -s sourceimg.bmp

use svg as glyph (python):

import fontforge
font = fontforge.open('blank.sfd')
glyph = font.createMappedChar('A')
glyph.importOutlines('sourceimg.svg')
font.generate('testfont.ttf')

That's it, result below for use on a website:

css:

@font-face
{
font-family: testfont;
src: url('testfont.ttf');
}

html:

<span style="font-family:testfont; font-weight:normal; color:green;">A</span>
<span style="font-family:testfont; font-weight:bold; color:green;">A</span>

Cobbett

Answer 2

You could try to reverse the path, not sure if there's an option in fontforge that let's you do that, but you can do it with inkscape (Path > Reverse).

Ethylene

thanks erik, i've tried your suggestion, unfortunately it doesn't seem to do the trick... – Cobbett

Answer 3

It seems that your glyph is hand drawn. If you want to make a full TTF font with tens or hundreds of glyphs, then you might consider eg. Scanahand which I have used for generating hand drawn fonts. It uses a template, on which you draw (or paste) letters, so that they come in the right vertical position. Horizontal position (and spacing) are calculated automatically at least in [A-Za-z] (may be in the future also other letters).

But I appreciate your solution because it uses free or open source tools and you have nearly full control of everything (eg. spacings). And the finest thing with potrace and fontforge is that that you can do it on-the-fly or make an online font creation service! Potrace is ported on AS3 (it works, I tested) and now also in JS ( https://github.com/antimatter15/js-potrace or https://github.com/dunvi/potrace-js), so it should also be possible to make a realtime preview window, which shows how vectorization result changes when potrace parameters changes.

Suetonius

Answer 4

In case anyone's curious about doing this with Autotrace, it's because the first child of an autotrace SVG of an image with a white background is a path that defines a white background. I solved the problem by writing a small program that removes the first child of the SVG before importing, but you can also delete the rectangle in FontForge by editing the glyphs.

Slur