danmarshall / google-font-to-svg-path

Create an SVG path from a Google font
https://danmarshall.github.io/google-font-to-svg-path
MIT License
734 stars 123 forks source link

Unbounded Font Bugs #40

Open charlieforward9 opened 1 year ago

charlieforward9 commented 1 year ago

Thanks for making this fantastic tool! It should help me avoid png->svg conversions of that turn into a headache. Unfortunately, there are gaps in the letters that have overlapping shapes, so I cannot use this as expected, yet...

I tried playing with the numbers, but nothing seemed to work...

Screen Shot 2023-03-29 at 1 16 51 AM
danmarshall commented 1 year ago

Not all fonts play nice 😁

It isn't common for a font to have geometries which overlap. Typically, each closed geometry is completely enclosed by another. The underlying library Maker.js assumes this.

The irony here is that the font is named Unbounded, so perhaps this by design 🤔 - but I don't think so, when you look at other glyphs such as a, e, 8, &:

image

I believe these overlaps need to be corrected in the font itself.

You may want to contact the font authors to let them know: https://twitter.com/googlefonts/status/1602970743683354624

anthrotype commented 1 year ago

no, actually it is very common for variable fonts (VF) to have such self-overlapping geometries, this allows them to be more easily interpolated at runtime, and rendering engines know that and always use non-zero fill rule when rendering them, so no gaps appear. This is a quote from the OT spec:

https://learn.microsoft.com/en-us/typography/opentype/spec/glyf#simple-glyph-description

Note that variable fonts often make use of overlapping contours. This has implications for tools that generate static-font data for a specific instance of a variable font, if broad interoperability of the derived font is desired: if a glyph has overlapping contours in the given instance, then the tool ... should merge contours to remove overlap of separate contours.

anthrotype commented 1 year ago

To workaround this, the user could download the static fonts for Unbounded (from the "Download family" button, e.g. https://fonts.google.com/download?family=Unbounded) and then use fonttools to remove overlaps; this in turns requires skia-pathops, but can be installed in one go with a command like pip install fonttools[pathops] (requires Python 3.8+). Then you would do, e.g.:

$ fonttools ttLib.removeOverlaps Unbounded-Regular.ttf Unbounded-Regular-no-overlaps.ttf

anthrotype commented 1 year ago

(apologies for cross-posting, I meant to add the comment & screenshot below to this issue, not the other one..)

here's the Regular with overlaps removed as explained above, then manually uploaded to the google-font-to-svg-path site:

image

charlieforward9 commented 1 year ago

Very educative, thank you! I will use this workaround until you a solution is implemented into the service. Thank you for all of the open source contributions!

danmarshall commented 1 year ago

Thanks @anthrotype , I didn't know that overlapping in VF! The underlying libraries pre-date the rise of variable fonts, so there will probably need to be an update.