Edit quadratic bezier curves

[ygoe]

Hello,

Background:

I'm working on a tool for font editing. The font is Google's Material Symbols (which I've learnt is completely new but I didn't know that when I discovered it 2 days ago). It comes in 6 styles and 7 weights. Each WOFF2 file has 200 kB and I only need a small part of the icons. So I found tools to extract information and create a subset of it. That's all good. But now come the ideas.

As I'm already taking the font files apart and reassemble them better, I might as well edit some of the broken icons (yes, Google's quality isn't the best here) or even add and mix new ones. The Fonttools package for Python converts the WOFF2 file to XML and back. In the XML I get the points of each contour in a glyph. I made the test and converted one symbol by hand from XML to SVG. Apart from a vertical flip, it looks exactly like the original SVG (which is only available in a single weight, so unusable for me).

A specialty of fonts is that they don't use cubic bézier curves with 2 control points but quadratic bézier curves with a single control point. And each visual curve seems to be constructed of a pair of quadratic curves with an implicit curve point in the middle of two specified control points. I could compute that manually and see the result.

Problem:

But editing and re-exporting this is odd. Of course I get the extra curve point (the middle one) that their original SVG with "C" curves doesn't have. But the quadratic curve is also gone in Affinity's SVG file and replaced with a "C" type cubic bézier curve with 2 control points that are different from what the quadratic curve had.

At the moment I'm not sure if and how I could convert that back to put the curves back into the XML for the font file.

Do I see it correctly that Affinity doesn't support editing quadratic curves and always just reads them as cubic bézier curves? Is there something I can change to keep the single "Q" type control point that I gave Affinity in my converted SVG? Or better yet, can I tell Affinity to export all (old and new) curves in the quadratic format? Should some curves not be available as Q, then I'd love to see Affinity constrain my edits to what Q can represent in the export.

[kenmcd]

Where are you getting the fonts?
Are you just saving the web fonts?
The GF web API normally does not supply full fonts.
They sub-set them on the fly to minimize the file size.
And I have yet to find the new symbol VF fonts actual sources.

What is your end goal?
Why don't you just convert the fonts from "Q" to "C" curves?
(ADesigner, and IL, etc. use "C" curves)

The font glyphs and the SVGs use different zero points.
So trying to rebuild a glyph from a TTX dump is going to be very difficult and error prone.

Again, what are you trying to accomplish with this?

[ygoe]

I get the font files from the Google Fonts CSS API. It's a bit complicated but I've automated these steps:

• Manual input: Look up the base URL for the font, here https://fonts.googleapis.com/css2?family=Material+Symbols+{style}:wght,FILL@{weight},{fill}
• Download that page with a Firefox user agent header
• Extract the font file URL from the provided CSS
• Download the font file

These are woff2 files and I fetch them individually for each style because their CSS contained ambiguous specifications last time I checked. And the fonts are complete, not subsetted. They can do this for text fonts but don't even offer it for symbol fonts.

I also haven't found the SVG sources for the new weights, so the woff2 file is my primary source now. I have no problem with that.

My end goal is to have a tool that creates a subset of the icon fonts. A prototype of it has extracted me 33 icons into a tiny woff2 file of 3.5 kB. With manual postprocessing I even merged the icons of three styles (three files) into a single file of 5 kB. (woff2 compression works much better if all (and similar) glyphs are merged into one file rather than separate files.)

And then, part of that tool should be a way to remix the icons. Like take a small checkmark from one symbol and insert it into another symbol to create a new combination. I might implement these simple edit operations directly on the contours and points of the font (converted to XML with Fonttools) with a live preview converted to SVG (view only).

But for any more advanced editing like cutting away or merging shapes I need a graphics editor, like Affinity Designer. When I integrate that into the workflow, I have two extra conversion steps on the outlines:

1. Convert double-quadratic curves by inserting the implicit middle curve point (and AD will then convert Q to C).
2. After the edit, convert back the curves from C to Q. Meanwhile I've found that Fonttools provides code for that (cu2qu), but it's in the Python API so it would require extra integration work.

In the end, when the user has edited the outline, there are some 3 points more for each curve. The next edit of the same glyph will already be harder and increase the number of points per curve to 9 or so. That's why I'd like to avoid these conversions altogether and import, edit and export only Q curves.

I don't see any problem with the XML dump from TTX. The dumped data can reproduce their original SVG (tested for one symbol). And the round-trip conversion woff2→ttx→woff2 gives a working font with the same symbols. I could also copy glyphs and ligatures from one font style to another and merge them together. It's all there. The only problem left is that graphics editors wipe out Q curves and replace them with C curves which can't be used directly in fonts.

Or maybe I'll have to convert the TrueType glyphs to OpenType which supposedly uses cubic curves. I haven't explored that path yet.

Hope this explains it.

[ygoe]

I'm certainly not doing commercial things here, but the Material Symbols (and Icons) are released under the Apache 2.0 licence. I assume that also applies to the font files that the owner of that icon set provides. I'd be sure to place attribution where possible, certainly in my edit tool because the icon set is its main feature. Anyway, the tool will download the fonts itself, so every user of it acts on their own behalf.

Source 1, Source 2, and from the slightly older Source 3:

Quote

We have made these icons available for you to incorporate them into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.

 

[kenmcd]

3 hours ago, BofG said:

I see, yes that font seems to be a special case. The Apache license is more permissive than the normal fonts on there.

Huh? The majority of the fonts are licensed OFL.

[kenmcd]

6 hours ago, ygoe said:

But for any more advanced editing like cutting away or merging shapes I need a graphics editor, like Affinity Designer.

You can probably do all of this with fonttools.
For example you can put one shape/contour on top of the other and "remove the overlap" which makes it all one contour (to combine into one).
I think the documentation is not up to date, but you can find it here:
https://github.com/fonttools/fonttools/blob/5cb288f3453bb7a2adea0437f0b7252efc12e321/Lib/fontTools/ttLib/removeOverlaps.py

There are also other ways to directly access the individual elements in a glyph.
I see the GF guys do this all the time.
They just whip-up a script when they need to fix something.
The fonttools guys can be very helpful.
Good specific questions are likely to get a helpful answer (and sometimes example code).
Bad questions such as "how do I build a font" are politely ignored.
One question I asked was responded to with a gist of a full script the next day.

You can look at some other projects to see how they access the font data.
The TruFont font editor is written entirely in Python.
TypeRig (for FontLab) and Glyphs-Scripts (for Glyphs App) are both extensions/tools which can edit fonts at the lowest level, and are written in Python. They are both using the respective APIs for access etc., but the actual raw edits are straight code. Both are FOSS on GitHub.
OpenType.js (FOSS on GitHub) uses JavaScript to display and edit fonts.
IIRC this is used in Samsa (FOSS on GitHub) and other online tools like Wakamai Fondue.
There are others ...

I think you would be better off just working directly on the fonts rather than trying to use other tools which require conversion.

Side note: I did find the three VF fonts used on the demo page. 26 masters in each one.

[kenmcd]

3 minutes ago, BofG said:

You cannot distribute derivatives of the fonts under those terms.

Sure you can. And people do it every day.

[kenmcd]

12 minutes ago, BofG said:

I meant to say that you cannot sell derivatives.

Sure you can. And people do.

[kenmcd]

6 minutes ago, BofG said:

Haha, well maybe. It does say "1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself."

Font Bundles! Yeah, people play games.
And who is gonna sue them?
There is a music fonts bundle for sale that I ran across that is almost all free, OFL, or old-and-hard-to-find fonts. Convenience. And allowed.
Like the person who put LibreOffice in the Microsoft Store for $4 or something like that.
Or the people who put all the LibreOffice manuals for sale on Amazon (because LO didn't do it).

On the other hand, CreativeMarket is full of modified OFL and commercial fonts.
Take a popular font, apply a distressed filter, and wah-lah, a new font, for only $14.
The changes are enough it is a "new" font.
There are a few font "developers" who are rather notorious for ripping-off anyone and everyone.
Have an acquaintance who is basically a font encyclopedia and she can tell us who they are and exactly which fonts they ripped-off. Don't get her going on that issue. 🤬

Thankfully the whole OFL fonts ecosystem works well and is growing rapidly.
And most people respect the rules, and the ethics, so we get great fonts for free-e-e-e!

 

[Old Bruce]

This is why I stay clear of free fonts. I don't know when someone will have messed something up which causes problems.

[ygoe]

Thanks for the references to other tools, I'll take a look at them. Maybe it'll be better to build my tool with Python instead of PHP (went faster for me) so I can more easily use the Fonttools API.

On 4/23/2022 at 11:19 PM, LibreTraining said:

Take a popular font, apply a distressed filter, and wah-lah, a new font, for only $14.

I had to read this out loud a few times to get it – did you mean: voilà? 🙃