68

How can I convert .svg files into a font? Is there any API or programmable method?

user-id-14900042
  • 686
  • 4
  • 17
Shoaib Ud-Din
  • 4,614
  • 3
  • 23
  • 23
  • What kind of SVG file do you have? Do you have an SVG file that contains an SVG font (using tags like , etc.)? – Thomas W Nov 07 '12 at 23:15
  • You could probably script fontforge to do that, but it depends on your input files being simple enough to be represented in a font. – Erik Dahlström Nov 08 '12 at 09:30
  • 2
    If you're looking for an API you can check this one from Mashape https://www.mashape.com/warting/online-font-converter – user3800324 Dec 15 '12 at 16:39
  • How is this about software or hardware? I don't have a horse in this race one way or the other, but this reason for this closure seems completely unjustified. If anything is should be closed due to Vagueness. Font, should be (TTF, ETF, OTF, WOFF or WOFF2) specification. – JΛYDΞV Jun 12 '22 at 13:55

3 Answers3

53

I found two relevant answers here on Stack Overflow:

  1. Creating icon fonts with vector software (i.e. inkscape) and fontforge?
  2. Tools to convert svg to ttf [closed] (archived from this deleted SO question)

Unfortunately, neither is really a coding answer, which is what I had really hoped for (a command line utility for scripted conversion or perhaps an API with which somebody could write such a thing).

Still, I got what I was looking for by combining those two answers.

Clean up SVG

(This step might be optional.) Open up your SVG in the free software program InkScape. Copy the existing SVG and create a new project from the FontForge Glyph template. Paste into that template, standardize the look, size, and position, and save as PLAIN SVG, one file per character ("glyph").

Convert SVG to font

Then, either use the free software program FontForge directly (as directed in the first answer, creating icon fonts with vector software) or else use the free IcoMoon online service (as directed in the second answer, tools to convert svg to ttf). I did the latter.

Using IcoMoon

IcoMoon is a rather straightforward tool. Click the purple Import Icons button on the top of the page to import each of your custom SVG glyphs. Then click "Get Info" on the set's preferences so you can name the set and give it some metadata. Use the "Edit" tool (the pencil icon) and click on each glyph to get the sizing and spacing just right.

When you're done, select all of the glyphs you want in the font and then press the "Generate Font" button at the bottom of the page. On the resulting screen, you can then map each glyph to a unicode character. On the right side, you can type or paste a character, or on the left side, you can enter its hexadecimal code. A program like GNOME Character Map (for Linux) or Windows Character Map or Mac OS Character Palette may help you find appropriate codes for your glyphs.

Now press the "Preferences" button at the top of the screen (or the gear at the bottom right) and finalize the name and metadata of your new font and press the "Download" at the lower right. You'll get a Fontname.zip file that contains a bunch of usage suggestions as well as the font files themselves.

Iterate

I found the sizing and spacing was really hard to get right (I was making letters). I kept iterating on IcoMoon, installing the font, and comparing my letters to letters in a similar font (using a word processor). Sizing was easy to get right, but spacing was not so easy (and I wasn't even messing with ligatures or kerning!). Don't forget that some systems require flushing the font cache after installing a new font (on Linux, that's fc-cache from Fontconfig)

Validate the font

You may also want to validate your font. Font Squirrel is an online service that lets you do that, offering corrections as well as usage tips. I think IcoMoon already does this, so perhaps that's only of use for FontForge creations.

Adam Katz
  • 14,455
  • 5
  • 68
  • 83
  • 1
    As a programmatically solution i would recommend `gulp-iconfont`. I need to set the option `fontHeight=1024` (> 1000), otherwise the font seems corrupted but at the end I got the same result as with icomoon. – sergej Jun 04 '20 at 15:25
  • The stackoverflow link for converting files to tff is a dead link.... Wouldn't have thought SO would be it's own link-rot victim. – Douglas Gaskell Jun 13 '21 at 02:30
  • 1
    @DouglasGaskell – Good call. If you have 10,000+ reputation, you have [moderator access](https://stackoverflow.com/help/privileges/moderator-tools) to see deleted content on SO. I don't think that Q&A is worth undeleting, so I updated the link with an archived copy. – Adam Katz Jun 23 '21 at 15:30
27

There are multiple online tools that allow you to upload SVG files and use those as icons for creating an icon font. Personally, I prefer the Icomoon App.

The Icomoon App allows you to do each of the following :

  • Get one or more icons from several popular icon fonts
  • Upload other fonts, which may be icon fonts but also regular fonts
  • Upload SVG files to use as icons
  • Combine any number of icons from any number of available fonts
  • Set the UNICODE hex value for whichever characters you need
  • Export and/or save the font set you create

Icomoon

John Slegers
  • 45,213
  • 22
  • 199
  • 169
6

As others wrote, it is possible to import svg shapes into fontforge and some font designers work this way.

However, shapes (outlines) are only one part of a modern smart font, so that won't be sufficient in itself. You also need to work on metadata, kerning, hinting, etc. That's a lot of definitely not-fun, hard, but necessary stuff, while would-be font designers usually dream about ego-rewarding artistic drawing and not much else.

That's one reason svg fonts never caught up as a format, they're missing too many parts to be useful to render text.

nim
  • 2,345
  • 14
  • 13