SVG to TTF font converter

Choose one SVG for each character, check the letter each one is typed with, and download a .ttf font you can install on Windows or a Mac or load on a web page.

Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.

or drop them here, or paste. One SVG for each character

How to make a font from SVG files

  1. Choose your SVG files, as many at once as you like, or drop them on the box. The page opens with three sample drawings so you can see a finished font first.
  2. Each drawing is given a character. Change it in the box beside the drawing: type the letter, or a code such as U+E001.
  3. Choose whether the drawings sit on the line like letters or are centred on it like icons, and give the font a name.
  4. Download the TTF. The line at the top of the tool is set in the very font you are about to save.

Which character each drawing gets

A file named for one character takes that character: a.svg is typed with a, &.svg with an ampersand. A file named with a Unicode number takes that number: u0041.svg, uni0041.svg and U+0041.svg all give a capital A, and uE001.svg gives the first free slot of the Private Use Area, where icon fonts keep their icons.

Any other name is handed the next free character in turn: A to Z, then a to z, then 0 to 9, then the Private Use Area from U+E000. Each character can be used once. If two drawings ask for the same one, the second is left out of the font until you change it, and the list says so.

Two glyphs are added that you did not draw. One is the empty box that programs show for a character the font lacks. The other is a space 300 units wide, unless one of your files is named for the space itself (u0020.svg).

How a drawing becomes a glyph

A font measures in units, here 1,000 to the em, the square a letter is designed in. Each SVG is scaled by the height of its own page. With “On the line”, the foot of the page stands on the baseline and the top is 800 units above it, the height of a tall letter. With “Centred on the line”, the page fills the whole line from 200 units below the baseline to 800 above, which is how icon fonts are made, so an icon lines up with the middle of the text beside it.

The width of the page becomes the advance, the distance the next character starts at. “Close up” ignores the page and leaves 50 units of space on each side of the ink instead, which suits letters drawn on pages much wider than they are.

Only filled shapes have an outline. A font has no colours, so every filled shape is ink whatever its colour, a white one included. Lines are made solid as bands of their own width unless you choose to leave them out; a dashed line becomes one unbroken band.

What is inside the TTF

  • True TrueType outlines. The glyphs are in a glyf table as quadratic Bézier curves, which is what makes a font file TrueType and not OpenType with PostScript outlines under another name.
  • Curves, converted with care. SVG curves are cubic and TrueType curves are quadratic, so each cubic curve is replaced by one or more quadratic ones that stay within half a unit of it, a two-thousandth of the em. At a text size of 100 pixels that is a twentieth of a pixel. Straight lines stay straight.
  • Holes that stay holes. A font fills by one rule only, non-zero winding. Contours are turned round where needed, outer ones clockwise and holes anticlockwise, so that a hole cut with the even-odd rule in your SVG is still a hole.
  • The tables a font needs: head, hhea, maxp, OS/2, hmtx, cmap, loca, glyf, name and post, with correct checksums. The family name is the one you type; the style is Regular.
  • Whole numbers. Every point is rounded to a whole unit, so nothing is more than half a unit from where you drew it.

What it does not do

  • Hinting. The font carries no instructions for fitting outlines to the pixel grid. Screens that smooth text, which is nearly all of them now, show it well; very small sizes look softer than a hinted font does.
  • Kerning, ligatures and other weights. There is one style, each character has one advance, and no pair of letters is tucked together.
  • Colour. A colour font is a different kind of file. Everything here is one ink, coloured by whatever uses the font.
  • Paths that cross themselves under the even-odd rule. The parts that the rule left empty where a path crosses itself may come out filled.
  • Text, pictures, clip paths and masks. Text inside an SVG is left out unless it was converted to outlines; embedded pictures are skipped; a clipped or masked shape is used whole. The notes under the list name each file this touches.

Questions

How do I install the font?

On Windows, double-click the .ttf file and press Install. On a Mac, double-click it and press Install in the Font Book window that opens. The font then appears under the name you gave it in the font menu of your programs.

Can I use it as an icon font on a website?

Yes. Choose “Centred on the line”, name the files uE001.svg, uE002.svg and so on, and load the result with @font-face { font-family: "My Font"; src: url("MyFont.ttf") format("truetype"); }. Every current browser reads TTF. A WOFF2 copy is smaller to send; this page writes TTF only.

Why is a hole in my letter filled in?

Most often the hole was not cut out but painted over, with a white shape laid on a black one. A font has no white: both shapes are ink. Cut the hole in your drawing program (in Inkscape: Path, Difference) and convert again.

Why are my letters different sizes in the font?

Each SVG is scaled by its own page, not by its ink. Draw every letter on a page of the same size, with the baseline at the same height on each, and they keep their sizes against each other.

Is this a TTF or an OTF?

A TTF. The outlines are quadratic curves in a glyf table, the TrueType kind, and there is no CFF table of PostScript outlines in the file.

Related