Produce a TTF from an SVG¶

Each glyph in the final TTF file must be represented by a single SVG path.

Once you have done this, you can fill in the following template.

The font will be named ${FONT_NAME}, and the a glyph will display the custom path.

The simple path M 200,200 L 200,800 L 800,800 L 800,200 Z is used in the example.

<?xml version="1.0" encoding="utf-8"?>
<!-- Created with dxf2svg -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 510 280" style="enable-background:new 0 0 238.1 238.1;" xml:space="preserve">
<font id="${FONT_NAME}" horiz-adv-x="1000">
    <font-face font-family="${FONT_NAME}" font-weight="400" font-stretch="normal" units-per-em="300" ascent="200" descent="0" alphabetic="0" />
    <missing-glyph horiz-adv-x="1000" />
    <glyph unicode="a" horiz-adv-x="600" fill-rule="nonzero" d="M 200,200 L 200,800 L 800,800 L 800,200 Z" />
</font>
</svg>

After this, use svg2ttf to conver the SVG font into a TTF font that may be used more broadly.

npm install -g svg2ttf
svg2ttf sample.svg sample.ttf