question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Icon font is distorted when converted to TTF

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
nzbartcommented, Apr 7, 2014

The solution I used was to call the gulp-iconfont plugin with a fontHeight of 1000 and normalize set to true. This solved the rounding error. Thanks for pointing out the cause of the problem, so that I was able to find this solution.

2reactions
hzsrccommented, Dec 13, 2018

The solution I used was to call the gulp-iconfont plugin with a fontHeight of 1000 and normalize set to true. This solved the rounding error. Thanks for pointing out the cause of the problem, so that I was able to find this solution.

Thanks a lot, good solution!

Read more comments on GitHub >

github_iconTop Results From Across the Web

svg - Icon Font - Distortion (Fix = Font Hinting?) - Stack Overflow
I'm creating a font to use for my icons (just much more flexible and efficient than using images). However, some of my icons...
Read more >
Fix Weird Font Problem in Windows 10 - YouTube
Fix Weird Font Problem in Windows 10This is a very weird font problem ... "Segoe UI Symbol ( TrueType )"="seguisym. ttf " "Segoe...
Read more >
Let's End the Debate on Icon Fonts vs SVG Icons in 2021
Icon Fonts vs SVG Icons! This is a debate that shows no signs of abating and is splitting the dev community into two....
Read more >
How to fix corrupted Fonts in Windows 11/10
Fix weird font problem. Rebuild, reset or fix corrupted Fonts on Windows 11/10. Use ControlPanel. Registry fix or do it manually like this....
Read more >
PDF Font Mapping | 5 Reasons Fonts Don't Display Right
4. Unknown Font in the PDF Document ... Ensure an exact match by converting formatted text to bezier curves. When you need a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found