fontello/svg2ttf

SVG -> TTF font convertor

Fontello - icon font scissors

website: fontello.com, help: wiki

This tool lets you combine icon webfonts for your own project. With fontello you can:

1. shrink glyph collections, minimizing font size
2. merge symbols from several fonts into a single file
3. access large sets of professional-grade open source icons

Developers API

Fontello allows easy scripting, to implement different convenient features:

1. Open site from command line, with your configuration, and import edited project
   • Makefile example. That's a live working code, used for development of fontello itself.
2. Writing website plugins, to import/export icons via admin panel.

When more examples available, those will be added here.

API methods

1. POST https://fontello.com/ creates a session with your config and return you session_id. You can use it later to open fontello with your configuration and to automatically download your font. Session is stored for 24h. POST params (form-encoded):
   • config - (Required) content of config.json for your font
   • url - (Optional) if used, download button will link to your admin panel, where you can run importing script.
2. https://fontello.com/[session_id] - opening fontello with your config preloaded. When you edit font, your config is automatically sent to server
3. https://fontello.com/[session_id]/get - download your font.

Note. When you open site via API url, download button will have another text.

Examples

• Makefile - quick load iconic font from your project via CLI & save result back.
• fontello-cli - the same, as above, but written in node.js. If you don't like make utility, then fontello-cli is for you :)
• fontello_rails_converter - Ruby CLI gem for interacting with the API. Additional features (Sass conversion) for Rails integration, but should work for every project.
• grunt-fontello - lightweight integration with grunt

Authors

• Roman Shmelev (shmelev).
• Vitaly Puzrin (puzrin).
• Aleksey Zapparov (ixti).
• Evgeny Shkuropat (shkuropat).
• Vladimir Zapparov (dervus).
• Alex Kocharin (rlidwka).

Thanks to:

• Werner Lemberg for help with ttfautohint.
• Hermanto Lim for the image.

License

Fontello's code (all files, except fonts) is distributed under MIT license. See LICENSE file for details.

Embedded fonts are distributed under their primary licenses (SIL OFL / CC BY / CC BY-SA). See fonts info on fontello website for credits & links to homepages. This info is also included in generated font archives for your convenience (see LICENSE.txt file).

Generated fonts are intended for web usage, and should not be considered/distributed as independent artwork. Consider fontello a "font archiver" and credit original font creators according to their respective license.

Crediting fontello is not required :)

svg2ttf's Issues

TTFs do not appear in the latest version of Keynote

I'm currently working on trying to figure this out myself, but I figured I'd make an issue here in case you know the cause of the issue. In the latest version of Keynote, icon fonts generated with svg2ttf do not appear in the font list. They do appear in the native list, and icons will work in keynote if copied in, or if they already exist in the document.

From my debugging so far, it doesn't appear to be an issue with the name table, as copying the name table from a font that does work (with the info correctly updated) does not fix the issue.

When I run the generated icon font through the Windows ttf validator, it throws all kinds of errors, so it's possible something unrelated in the font is causing the problem.

SVG canvas should be respected - allowing icons to bleed outside of it

Hi. Thanks for fixing #26 (and indirectly nfroidure/gulp-iconfont#13)

However there's another problem that remains - namely that icons that "bleed" outside their svg canvas are re-framed/normalized based on their vector shape, instead of the canvas.

I've created a small test that illustrates this: http://mar.eplica.is/gulp-iconfont-bleed-tests.zip

As seen below the .svg font respects the canvas correctly, and allows the icon-shapes to bleed outside of it, whereas all the other fonts (derived from the .svg font via svg2ff) don't.

Chrome:

IE11

Problem with vertical-alignment.

Hi. I've been having issues with vertical-alignment (both cross-browser, and compared with professional icon-font generators) in icon fonts generated using the gulp-iconfont module.

See discussion and screen-shots here:
nfroidure/gulp-iconfont#13 (comment)

According to the author of gulp-iconfont, a part of the problem may lie within svg2ttf module, which is why he asked me to submit this there also.

Here are example files and visual test-cases that I made, which may help track this down: http://mar.eplica.is/gulp-iconfont-tests.zip

package.json

Hi,

Just to let you know that npm report this :

npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm.
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! System Darwin 13.1.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "svg2ttf"
npm ERR! cwd /data/web/template-agency
npm ERR! node -v v0.10.28
npm ERR! npm -v 1.4.9
npm ERR! file /Users/esl-olivierb/.npm/svg2ttf/1.1.2/package/package.json
npm ERR! code EJSONPARSE

Cheers !

Private Use area isn't detected

When my glyphs use the private use area, they are ignored.
The private use area starts with U+F000

Font alignment bug

I encounter a little bug with the font vertical alignment.

I used your library and the tool available here.
I don't have the same result.

Here is a link to all materials I used to test that : https://dl.dropboxusercontent.com/u/6808920/fonts.zip

Exception thrown when no font element present in svg

I have an svg that renders correctly in Inkscape, but causes svg2ttf to throw the following exception:

var fontFaceElem = fontElem.getElementsByTagName('font-face')[0];
                              ^                                   
TypeError: Cannot call method 'getElementsByTagName' of undefined 

There is no font element in the svg, which is below:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<g>
</g>
    <path d="M15.805 1.282c-8.13 0.109-14.632 6.787-14.523 14.917 0.109 8.125 6.787 14.629 14.917 14.52 8.126-0.109 14.63-6.787 14.52-14.917-0.107-8.126-6.786-14.629-14.914-14.52zM15.762 24.96h-0.082c-1.251-0.037-2.134-0.96-2.099-2.194 0.035-1.211 0.939-2.093 2.15-2.093l0.074 0.002c1.286 0.038 2.16 0.952 2.122 2.221-0.035 1.214-0.926 2.064-2.165 2.064zM21.027 14.509c-0.296 0.418-0.942 0.938-1.758 1.573l-0.899 0.621c-0.493 0.384-0.79 0.744-0.901 1.098-0.090 0.282-0.131 0.354-0.139 0.922l-0.002 0.146h-3.429l0.010-0.291c0.042-1.194 0.072-1.894 0.566-2.475 0.776-0.91 2.488-2.013 2.56-2.059 0.245-0.186 0.451-0.395 0.606-0.619 0.36-0.496 0.518-0.888 0.518-1.27 0-0.533-0.158-1.026-0.47-1.464-0.301-0.424-0.872-0.638-1.698-0.638-0.819 0-1.379 0.261-1.715 0.794-0.347 0.549-0.52 1.123-0.52 1.712v0.147h-3.536l0.006-0.154c0.091-2.166 0.864-3.725 2.298-4.635 0.899-0.581 2.019-0.874 3.325-0.874 1.71 0 3.157 0.416 4.293 1.235 1.152 0.83 1.736 2.075 1.736 3.698 0 0.909-0.286 1.762-0.851 2.536z" fill="#000000" />
</svg>

Is it valid to have the missing font element, and should svg2ttf cater for this scenario?

Invalid TTF font generated with Node 10

TTF generated with the same settings and same SVGs works fine when generated with Node 8 (see fonts.zip)

Replacing FontForge?

Is the goal of this project to eventually replace FontForge? That would be extremely awesome if that is the case.

An in-range update of mocha is breaking the build 🚨

Version 3.4.0 of mocha just got published.

Branch	Build failing 🚨
Dependency	mocha
Current Version	3.3.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As mocha is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Release Notes

v3.4.0

Mocha is now moving to a quicker release schedule: when non-breaking changes are merged, a release should happen that week.

This week's highlights:

• allowUncaught added to commandline as --allow-uncaught (and bugfixed)
• warning-related Node flags

🎉 Enhancements

• #2793, #2697: add --allowUncaught to Node.js (@lrowe)
• #2733: Add --no-warnings and --trace-warnings flags (@sonicdoe)

🐛 Fixes

• #2793, #2697: fix broken allowUncaught (@lrowe)

🔩 Other

• #2778: Add license report and scan status (@xizhao)
• #2794: no special case for macOS running Karma locally (@boneskull)
• #2795: reverts use of semistandard directly ([#2648]) (@boneskull)

Commits

The new version differs by 9 commits0.

• 7554b31 Add Changelog for v3.4.0
• 9f7f7ed Add --trace-warnings flag
• 92561c8 Add --no-warnings flag
• ceee976 lint test/integration/fixtures/simple-reporter.js
• dcfc094 Revert "use semistandard directly"
• 93392dd no special case for macOS running Karma locally
• 4d1d91d --allow-uncaught cli option
• fb1e083 fix allowUncaught in browser
• 4ed3fc5 Add license report and scan status

false

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Bytes change with each compile

Thanks for this great tool!

I'm appending md5 hashes to my asset filenames so I can cache them infinitely on my server. The hashes are generated based on the file contents. So unchanged files will always generate the same hash.

Unfortunately, the bytes are changing slightly with each compile from an unchanged source svg font. Ideally, running this conversion on the same file should create the exact output each time, but that's not the case.

On the left is the first time I generated the file, and the right is the second time. The source was exactly the same. Any ideas?

Conversion alters shapes

Given the source:

The result is this:

The issue appears to happen when converting from svg font -> ttf. I tested this by switching the font-face declaration to only use the svg font, which looks great.

I don't notice this issue in Fontello icons (which I presume use this lib), so I'm not sure why I'm experiencing this.

Reference:
https://github.com/github/octicons/blob/master/svg/link.svg
http://octicons.github.com/icon/link/

Minor typo in ttf/tables/name.js

Note that currently this typo has no effect on output TTF files. Only if the getStrings() function includes more languages might this change.

An array is set up with objects that include property name "languageID". Later the array is sorted using an ordered list of property name keys. Typo is that key list contains "language" vs. the correct "languageID". Below diff fixes this. (If I get time I'll do a proper pull request).

--- name.js.original    2014-05-26 14:13:48.753995700 -0500
+++ name.js     2014-05-28 13:21:30.427525000 -0500
@@ -50,7 +50,7 @@
   });

   result.sort(function (a, b) {
-    var orderFields = ['platformID', 'encodingID', 'language', 'id'];
+    var orderFields = ['platformID', 'encodingID', 'languageID', 'id'];
     var i;
     for (i = 0; i < orderFields.length; i++) {
       if (a[orderFields[i]] !== b[orderFields[i]]) {

Pack glyph contour flags

http://www.microsoft.com/typography/otspec/glyf.htm

We use shor bytes for X,Y coordinates, but don't pack flag bytes. That can save ~5% of file size.

Crash on fontforge-generated SVG

https://github.com/fontello/fontello/blob/master/assets/vendor/fontello/src/font/icons.svg#L26

1. Seems fontforge's .notdef symbol cause crash.
2. If .notdef exists, we should use it instead of default.

Improve cubic bezier curves approximation with quadratic beziers

Current cubic2quad convert algorythm is very basic. That does not affect original fonts, but can cause issues, when originals are drawn in SVG. We use stupid midpoint approach with 2 quad curves. It sucks, because we need to keep tangents on edge points.

1. Approaches:
   • http://www.timotheegroleau.com/Flash/articles/cubic_bezier_in_flash.htm
   • http://stackoverflow.com/a/14514491/1031804
2. Error metrict calculation:
   • ? Hausdorff: http://mathnet.kaist.ac.kr/mathnet/thesis_file/jksiam-v13n4p257.pdf
   • ? Midpoint

Example to reproduce problem (from octicons font):

<svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg">
  <path d="M768 768H576c0 0-254.281 0-256-256 0-22.281 3.469-43.469 8.312-64h137.405c-11 18.875-17.719 40.562-17.719 64 0 128 128 128 128 128h192c0 0 128 0 128-128S768 384 768 384s-0.125-64-64-128h64c0 0 256 0 256 256S768 768 768 768zM695.688 576H558.25c11-18.875 17.75-40.562 17.75-64 0-128-128-128-128-128H256c0 0-128 0-128 128s128 128 128 128-3.906 64.875 65.719 128H256c0 0-256 0-256-256s256-256 256-256h192c0 0 256 0 256 256C704 534.281 700.5 555.5 695.688 576z" />
</svg>

I can't run it in windows

it says "npm :command not found" when I input "npm install -g svg2ttf" in windows CLI.
Can anyone help me

fail with ligatures

Hi!

I got Error: TypeError: Cannot read property 'length' of undefined

building a minimal sample here! (includes sample.svg)
https://github.com/tgfjt-boxbox/sample-svg2ttf/

I don't understand well but some glyph.d are undefined.
e.g. { contours: [], id: 0, height: 0, name: '', width: 0 }
https://github.com/fontello/svg2ttf/blob/master/index.js#L131

I've tried to edit svg2ttf/index.js for detecting glyph.d == undefined, and works fine.
https://github.com/tgfjt-boxbox/sample-svg2ttf#edit-svg2ttfindexjs

@sabberworm
Something wrong svg I made??
I also tried gulp-iconfont but got same error.

ref: #32

Create a Grunt plugin

I may do it if you want.

Icon font is distorted when converted to TTF

I have an SVG icon font that displays as a nice circle with a question-mark in the middle when rendered in Chrome. However, when converted to TTF format using svg2ttf, the icon is distorted.

Below is the source SVG font:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <font id="font-icons" horiz-adv-x="32">
    <font-face font-family="font-icons"
      units-per-em="32" ascent="32"
      descent="0" />
    <glyph glyph-name="info"
      unicode="&#xE00C;"
      horiz-adv-x="32" d=" M15.805 30.718C7.674999999999999 30.609 1.173 23.931 1.282 15.801000000000002C1.391 7.676000000000002 8.068999999999999 1.1720000000000041 16.198999999999998 1.2810000000000024C24.324999999999996 1.3900000000000041 30.829 8.068000000000001 30.718999999999998 16.198C30.612 24.324 23.933 30.827 15.804999999999998 30.718000000000004zM15.762 7.039999999999999H15.68C14.429 7.076999999999998 13.546 8 13.581 9.233999999999998C13.616 10.444999999999997 14.52 11.326999999999998 15.731 11.326999999999998L15.805 11.325C17.091 11.286999999999999 17.965 10.372999999999998 17.927 9.104C17.892 7.890000000000001 17.001 7.039999999999999 15.762 7.039999999999999zM21.027 17.491C20.731 17.073 20.085 16.552999999999997 19.269000000000002 15.918L18.37 15.297C17.877000000000002 14.913 17.580000000000002 14.553 17.469 14.199000000000002C17.379 13.917000000000002 17.338 13.845000000000002 17.330000000000002 13.277000000000001L17.328000000000003 13.131H13.899000000000003L13.909000000000002 13.422C13.951000000000002 14.616 13.981000000000002 15.315999999999999 14.475000000000003 15.897000000000002C15.251000000000003 16.807000000000002 16.963000000000005 17.910000000000004 17.035000000000004 17.956000000000003C17.280000000000005 18.142000000000003 17.486000000000004 18.351000000000003 17.641000000000005 18.575000000000003C18.001000000000005 19.071000000000005 18.159000000000006 19.463 18.159000000000006 19.845000000000002C18.159000000000006 20.378 18.001000000000005 20.871000000000002 17.689000000000007 21.309000000000005C17.38800000000001 21.733000000000004 16.817000000000007 21.947000000000003 15.991000000000007 21.947000000000003C15.172000000000008 21.947000000000003 14.612000000000007 21.686000000000003 14.276000000000007 21.153000000000002C13.929000000000007 20.604000000000003 13.756000000000007 20.03 13.756000000000007 19.441000000000003V19.294000000000004H10.220000000000008L10.226000000000008 19.448C10.317000000000007 21.614000000000004 11.090000000000009 23.173000000000002 12.524000000000008 24.083000000000002C13.423000000000009 24.664 14.543000000000008 24.957 15.849000000000007 24.957C17.559000000000008 24.957 19.006000000000007 24.541 20.142000000000007 23.722C21.294000000000008 22.892000000000003 21.878000000000007 21.647000000000002 21.878000000000007 20.024C21.878000000000007 19.115000000000002 21.592000000000006 18.262 21.027000000000008 17.488z" />
  </font>
</defs>
</svg>

I converted this .SVG file to .TTF using the following command line:

node node_modules\svg2ttf\svg2ttf.js font-icons.svg font-icons.ttf

problem with horizontal alignment

I have an SVG where the left side of the path extends to the left of the canvas. But after converting this SVG to TTF, the left side of the path gets aligned with x=0 on the canvas.
(my use of the term "canvas" might be incorrect, I don't know the proper term)

My desired outcome is that the left side of the glyph will maintain it's position relative to the canvas, rather than getting pushed to the right past x=0. Is there any way to do this?

SVG file:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <font id="test" horiz-adv-x="905">
    <font-face font-family="test"
      units-per-em="1000" ascent="1150"
      descent="140" />
    <missing-glyph horiz-adv-x="0" />
    <glyph glyph-name="minus"
      unicode="&#xF18B;"
      horiz-adv-x="905" d=" M0 336H907C919 336 929 346 929 359C929 372 919 382 907 382H0C-12 382 -22 372 -22 359C-22 346 -12 336 0 336z" />
  </font>
</defs>
</svg>

actual output:

desired output:

Invalid dependency name

I'm trying to install the Fontello but there is error about jDataView not found.

I've found the name of jDataView was changed to 'jdataview' from this commit

jDataView/jDataView@c9e3e12

Please check, Thanks.

some svg font cannot be converted to ttf( Exception )

https://dl.dropboxusercontent.com/u/760909/in.svg

First of all it does not have metadata, and fails at

function load(str) {
  var doc = (new DOMParser()).parseFromString(str, "application/xml");

  var metadata = doc.getElementsByTagName('metadata')[0];
  var fontElem = doc.getElementsByTagName('font')[0];
  var fontFaceElem = fontElem.getElementsByTagName('font-face')[0];

  var font = {
    metadata: metadata.firstChild.data

if fix it by adding check

metadata: metadata!= null ?metadata.firstChild.data: null,

not it fails on create ttf:in os2.js:

buffer.js:784
    throw TypeError('value is out of bounds');
          ^
TypeError: value is out of bounds
    at TypeError (<anonymous>)
    at checkInt (buffer.js:784:11)
    at Buffer.writeInt16BE (buffer.js:908:5)
    at Object.jDataView._nodeBufferAction (E:\temp\fonts\svg2ttf\node_modules\jDataView\src\jDataView.js:293:101)
    at Object.jDataView._action (E:\temp\fonts\svg2ttf\node_modules\jDataView\src\jDataView.js:270:15)
    at Object.proto.(anonymous function) [as setInt16] (E:\temp\fonts\svg2ttf\node_modules\jDataView\src\jDataView.js:677:9)
    at Object.proto.(anonymous function) [as writeInt16] (E:\temp\fonts\svg2ttf\node_modules\jDataView\src\jDataView.js:680:22)
    at Object.createOS2Table [as create] (E:\temp\fonts\svg2ttf\lib\ttf\tables\os2.js:36:7)
    at E:\temp\fonts\svg2ttf\lib\ttf.js:99:26
    at Function.forEach (E:\temp\fonts\svg2ttf\node_modules\lodash\dist\lodash.js:2590:15)

because in buf.writeInt16(font.avgWidth); // xAvgCharWidth
avgWidth is NaN

Consider set fsType = 0

fontello/fontello#436 (comment)

Nested circle paths break on Android

I ran into this issue when trying to put social icons inside some circles, but found out the issue was generated when there was a path that had a circle cut out of another circle (cutting a rectangle out didn't seem to reproduce it).

Here is some simple svg that causes the issue (created with Sketch. I've used svgo to get rid of extraneous stuff but the issue occurs with or without the optimisation)

<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
    <title>facebook-logo</title>
    <desc>Created with Sketch.</desc>
    <g fill="none" fill-rule="evenodd">
        <g fill="#D8D8D8">
            <path d="M25 50c13.807 0 25-11.193 25-25S38.807 0 25 0 0 11.193 0 25s11.193 25 25 25zm0-6c10.493 0 19-8.507 19-19S35.493 6 25 6 6 14.507 6 25s8.507 19 19 19z"/>
        </g>
    </g>
</svg>

Expected output (Chrome in OSX):

Damaged output (Chrome in Android 5.0)

The really interesting thing is that this happens in every browser on Android. I tried Firefox and the default AOSP browser (in the emulator) and I got a similar result. I think this is a collision of an Android bug and an interesting handling of ttf files from Fontello.

I originally discovered this using gulp-fonticon, but I'm assuming that the error is happening here because the TTF and WOFF files are affected, and the same issue happens when using the Fontello website.

I'm just charging up an Android 4 device in the house to see if the same thing happens.

Poor-quality converted glyphs

I've been digging into an issue with the quality of icons used in the Seti UI project. It seems that when the SVG font is converted to TTF, the quality of the glyphs is badly affected. This seems most obvious with curves, but doesn't seem limited to them (e.g. the "M" in "ASM" below).

For example, here are some original SVG font glyphs:

And here's what they look like after conversion to TTF:

Command-line used:

svg2ttf seti.svg seti.ttf

Could this be related to issue #25 ?

Original issue against Seti UI: jesseweed/seti-ui#401

ligatures support

That's not much needed on practice, due bad browser support, but could be funny.

Why is the current date written to the output?

The generated ttf file changes with every run even when the svg source is still the same. This is not ideal when using a versioning tool (although generated files probably don't belong there). Is it absolutely necessary to write the dates into the file?

/cc @nfroidure

Script tags should be arranged alphabetically

See fontello/fontello#607

• ots-sanitize shows warning "Layout: tags aren't arranged alphabetically".
• The same in FF 54 (now in Aurora), because it uses the package above.

Issue with Arc pathes

While trying to convert this SVG font to tff with this lib : https://github.com/nfroidure/svgicons2svgfont/blob/master/tests/expected/shapeicons.svg

I do not see the expected result, it should draw 2 circles (similar to the following https://github.com/nfroidure/svgicons2svgfont/blob/master/tests/fixtures/shapeicons/circle.svg) and i have lines instead.

It seems that Arcs aren't supported in PathDatas:
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

Internet Explorer 11 has a vertical offset with converted fonts

I'm having the same issue with IE11 as thamagnetix in this closed issue here:
#26 (comment)

However after trying just about everything I did find a fix (which is not ideal) which involved opening the font in FontForge and changing two parameters, then saving out the font again in each required format:
FontCustom/fontcustom#197 (comment)

I'm not sure what the implications of this would be for other fonts, it doesn't affect our custom icon font in Chrome or Firefox.

I want to convert this formula logo svg to tff

http://tdi.com.sa/images/logo.svg

Please help me
):

Android browser missing icon

I am using gulp-icon font to create an iconic font i did post an issue with them but they suggested that it was an issue with the ttf creation.

When viewing the icons in an android browser whichever svg icon was in position 3 during the generation will not display (the space where the icon should appear is blank). e.g:

uE001-icon-1.svg
uE002-icon-2.svg
uE003-icon-3.svg --> affected icon
uE004-icon-4.svg

uE001-icon-1.svg
uE002-icon-2.svg
uE003-icon-5.svg --> affected icon
uE004-icon-6.svg

uF001-icon-1.svg
uF002-icon-2.svg
uF003-icon-3.svg --> affected icon
uF004-icon-4.svg

1. When you remove the affected icon and regenerate, the affected icon is then the next one on
2. If you manually rename the svg file and update the icon char it will still be whatever one is in position 3
3. I have tried updating the unicode to be /f.... but it has not solved the issue
4. This only happens in android 4.2.2 browser using .ttf font

when it is in position 3 as shown above it is also in position 3 in the generated .ttf file. Any help is greatly appreciated......

Broken result on SVG with single space char

Test sample:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<font id="entypo" horiz-adv-x="1000" >
<font-face units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph unicode="&#x20;" horiz-adv-x="500" />
</font>
</defs>
</svg>

Font symbols look not sharp

Hello.
I'm using svg2ttf for generating ttf font for processing to other formats like eot, woff, etc.
I've noticed that icons in ttf are have crashed edges in IE and Firefox(Windows).

Currently, I use this config:

{
    fontHeight: 1024,
    ascent: 896,
    descent: 128
}

But I've tried different variants and received the same result.

Also, I've tried to convert my svg font via other online tools.
The result I received (svg2ttf from the left):

All screenshots was made in IE.
As you can see, the font looks much better.
So, is this an issue of svg2ttf?

Possibility to change version of font

When we generate .ttf file we haven't possibility to change version because it fixed value in code:
font.sfntNames.push({ id: 5, value: 'Version 1.0' });

It would be great to have something like this:
font.sfntNames.push({ id: 5, value: options.version || 'v1.0' });

Add support for hkern and vkern elements.

Obviously mostly useful for traditional typefaces, but I think even for icon fonts would benefit from this feature being supported.

Example

Without kerning pairs

With kerning pairs

<hkern g1="diamond" g2="diamond" k="100" />
<hkern g1="home" g2="home" k="-100" />

Inconsistent Ascent between Windows and Macs

We're getting inconsistent rendering on Windows and Macs. Macs fonts display as expected, while Windows fonts have a large amount of whitespace on top. We've tracked it down to these lines:

For Windows, it gets the greater of the yMax or ascent: https://github.com/fontello/svg2ttf/blob/master/lib/ttf/tables/os2.js#L66

While for Macs, it's just getting the ascent: https://github.com/fontello/svg2ttf/blob/master/lib/ttf/tables/hhea.js#L12

Is this intended? If not, we'd be happy to submit a PR.

Missing required table: "post"

This is more of a question than it is an issue (for the time being)
Not sure if it's my particular font, but I ran my font through fontlint and it returned
" "Missing required table: "post" "
Along with all the other glyph related errors (that I caused myself 🎉)

I'm using gulp-svg2ttf, for what its worth, I'm gonna try creating another font and running that through fontlint as well - but is anyone else having the same issue?

Please add proper support for font.weightClass

svg2ttf/index.js

Line 42 in 56b97c9

//font.weightClass = svgFont.weightClass;

// need to correctly convert text values, use default (400) until compleete
//font.weightClass = svgFont.weightClass;

svgicons2svgfont has added support for fontWeight, but this does not carry over to the TTF files.
nfroidure/svgicons2svgfont@a33ae62

Branding names optional

Possibility to make optional the name description and the vendor url on the the table names

L49
L50

Add checksums for TTF tables.

See documentation here: http://www.microsoft.com/typography/otspec/otff.htm

Glyphs don't fall back to the global horiz-adv-x attribute

The SVG font specification states that if a glyph doesn't specify a horiz-adv-x attribute it should use the one specified on the font element.

Svg2ttf doesn't seem to do this and appears to use whichever was the last one specified instead?

Node 10 emits deprecation notice of `new Buffer()`

Node 10 emits a warning to stderr when running svg2ttf about the Buffer constructor being deprecated:

(node:18208) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

I normally would say that this is not a big issue, but it actually causes our Rush build to be "successful with warnings" because of the write to stderr, which prevents Rush from doing an incremental build on that package because of the warnings. Also, it will likely cause the the rush build command to exit with a non-zero exit code in the next major version.

I can pipe the stderr output to stdout, but that's hacky and results in legitimate errors not being collated and reported by Rush's summary reporting mechanism (it collates everything from stderr for all packages' builds in the monorepo when there are errors)

Seems like a quick change from new Buffer() to Buffer.from() in svg2ttf.js?

Crash on SVG with empty <metadata>

Seems, svg2ttf crashes, if source svg contains empty metadata tag: <metadata></metadata>

Expose all fontNames metas

Would it be possible to add the ability to expose options for the following fontNames metas?:

[7] Trademark
[8] Manufacturer
[9] Designer
[10] Description
[11] URL vendor
[12] URL designer
[13] License
[14] License URL
[15] Preferred family
[16] Preferred subfamily
[17] Mac Name
[18] Sample text
[19] Ps findfont name
[20] WWS family
[21] WWS subfamily

font.sfntNames.push({ id: 7, value: options.trademark || 'default trademark' });
...

based on this line: L34

Not able to set fsType via options

fsType is now hardcoded to 8. This triggers a error in IE11 when trying to use the fonts.
If the default is set to 0 or make it possible to overwrite via options, would fix the ie issue

Underline thickness and position are lost

After converting SVG to TTF, font loses some metrics: underline-thickness, underline-position

In svg font they are set:

  <font-face 
    font-family="Test Font"
    font-weight="400"
    font-stretch="normal"
    units-per-em="512"
    panose-1="2 0 5 9 0 0 0 0 0 0"
    ascent="512"
    descent="0"
    bbox="0 0 512 512"
    underline-thickness="50"
    underline-position="-150"
    unicode-range="U+E3C6-E3CB"
  />

but after converting to TTF values are 5 for position, 0 for thickness. I used FontForge and FontKit to test those metrics, both report same values.

SVG with overlap gets rendered transparent

When I convert an svg with overlapping regions, the regions that have an overlap become transparent in the font.

Example:

<?xml version="1.0" encoding="utf-8"?>
<!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 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
    <circle fill="#231F20" cx="149.5" cy="101.1" r="47.6"/>
    <polygon fill="#231F20" points="161.4,223.6 138.6,246.5 138.6,140.6 161.4,140.6     "/>
</g>
</svg>

SVG not parsed correctly, precision lost

Svgs like this can not be parsed correctly:
state-beinvited.svg.zip

Maybe precision lost?