googlefonts / fontmake

Compile fonts from sources (UFO, Glyphs) to binary (OpenType, TrueType).
Apache License 2.0
777 stars 93 forks source link

TTF interpolation defects #738

Open dy opened 3 years ago

dy commented 3 years ago

Hello! I am building a variable font for rendering waveforms, https://audio-lab.github.io/wavefont/, and observing an issue with interpolating TTF state. Font has alignment axis, and masters define top-align and bottom-align state, with values of algn 1 and 0 respectively, see descignspace file. Center align state (algn 0.5) is expected to be interpolated by font. And it is interpolated nicely by OTF font, generated with afdk: image

But with TTF font, generated by fontmake, interpolation shows artifacts: image As if top part of bars have right edge lowered by 1px.

What can that be related to? Some rounding to int?

anthrotype commented 3 years ago

you said you generated the OTF using afdko. What specific tool and exact command-line did you use to build it?

dy commented 3 years ago

buildmasterotfs -d masters/wavefont.designspace

and then

buildcff2vf -c -k -d masters/wavefont.designspace -o ./font/wavefont.otf

The afdko version used is 3.6.2-alpha2

pip install --pre afdko==3.6.2a1

anthrotype commented 3 years ago

i'm unable to build your designspace using the command fontmake -m masters/wavefont.designspace -o variable, I'm getting this error (full traceback when running fontmake with --verbose DEBUG):

ERROR:root:In 'wavefont.designspace': Generating fonts from Designspace failed: The file '0.glif' associated with glyph '_0' in contents.plist does not exist on <osfs '/Users/clupo/Github/wavefont/masters/1_0.ufo'>/glyphs
Traceback (most recent call last):
  File "/Users/clupo/.local/pipx/venvs/fontmake/lib/python3.9/site-packages/fs/osfs.py", line 639, in open
    return io.open(
FileNotFoundError: [Errno 2] No such file or directory: b'/Users/clupo/Github/wavefont/masters/1_0.ufo/glyphs/0.glif'

[... omit for brevity ...]

fontTools.ufoLib.errors.GlifLibError: The file '0.glif' associated with glyph '_0' in contents.plist does not exist on <osfs '/Users/clupo/Github/wavefont/masters/1_0.ufo'>/glyphs

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "/Users/clupo/.local/pipx/venvs/fontmake/lib/python3.9/site-packages/fontmake/__main__.py", line 464, in main
    project.run_from_designspace(designspace_path, **args)
  File "/Users/clupo/.local/pipx/venvs/fontmake/lib/python3.9/site-packages/fontmake/font_project.py", line 947, in run_from_designspace
    raise FontmakeError(
fontmake.errors.FontmakeError: In 'wavefont.designspace': Generating fonts from Designspace failed: The file '0.glif' associated with glyph '_0' in contents.plist does not exist on <osfs '/Users/clupo/Github/wavefont/masters/1_0.ufo'>/glyphs
dy commented 3 years ago

Ah, sorry about that, yes, ‘npm run build’ should come first, these glyphs are automated.

On Mon, Feb 22, 2021 at 6:26 AM Cosimo Lupo notifications@github.com wrote:

i'm unable to build your designspace using the command fontmake -m masters/wavefont.designspace -o variable, I'm getting this error (full traceback when running fontmake with --verbose DEBUG):

ERROR:root:In 'wavefont.designspace': Generating fonts from Designspace failed: The file '0.glif' associated with glyph '_0' in contents.plist does not exist on <osfs '/Users/clupo/Github/wavefont/masters/1_0.ufo'>/glyphs Traceback (most recent call last): File "/Users/clupo/.local/pipx/venvs/fontmake/lib/python3.9/site-packages/fs/osfs.py", line 639, in open return io.open( FileNotFoundError: [Errno 2] No such file or directory: b'/Users/clupo/Github/wavefont/masters/1_0.ufo/glyphs/0.glif'

[... omit for brevity ...]

fontTools.ufoLib.errors.GlifLibError: The file '0.glif' associated with glyph '_0' in contents.plist does not exist on <osfs '/Users/clupo/Github/wavefont/masters/1_0.ufo'>/glyphs

The above exception was the direct cause of the following exception:

Traceback (most recent call last): File "/Users/clupo/.local/pipx/venvs/fontmake/lib/python3.9/site-packages/fontmake/main.py", line 464, in main project.run_from_designspace(designspace_path, **args) File "/Users/clupo/.local/pipx/venvs/fontmake/lib/python3.9/site-packages/fontmake/font_project.py", line 947, in run_from_designspace raise FontmakeError( fontmake.errors.FontmakeError: In 'wavefont.designspace': Generating fonts from Designspace failed: The file '0.glif' associated with glyph '_0' in contents.plist does not exist on <osfs '/Users/clupo/Github/wavefont/masters/1_0.ufo'>/glyphs

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/googlefonts/fontmake/issues/738#issuecomment-783305801, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACJII4B2B6YUKWK4EUODVDTAI5N5ANCNFSM4X6OXBWQ .

anthrotype commented 3 years ago

still getting an error after running npm run build from the root of the wavefont repository directory.

$ npm run build

> wavefont@2.0.0 build
> npm run build-values-1-0 && npm run build-values-1-1 && npm run build-values-1-center && npm run build-values-100-0 && npm run build-values-100-1 && npm run build-ttf

> wavefont@2.0.0 build-values-1-0
> build-values.sh 1 0

sh: build-values.sh: command not found
npm ERR! code 127
npm ERR! path /Users/clupo/Github/wavefont
npm ERR! command failed
npm ERR! command sh -c build-values.sh 1 0

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/clupo/.npm/_logs/2021-02-22T11_45_38_224Z-debug.log
npm ERR! code 127
npm ERR! path /Users/clupo/Github/wavefont
npm ERR! command failed
npm ERR! command sh -c npm run build-values-1-0 && npm run build-values-1-1 && npm run build-values-1-center && npm run build-values-100-0 && npm run build-values-100-1 && npm run build-ttf

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/clupo/.npm/_logs/2021-02-22T11_45_38_250Z-debug.log
dy commented 3 years ago

Hm, try sudo chmod +x build-values.sh sudo chmod +x build-values-center.sh. Are you running in macOS? If doesn't work, I do manually

./build-values.sh 1 0
./build-values.sh 1 1
./build-values-center.sh 1
./build-values.sh 100 0
./build-values.sh 100 1

Sorry for that hassle, will replace bash script soon.

anthrotype commented 3 years ago

even after setting the executable flag I get the same error when doing npm run build. I was able to run the shell scripts one by one. Yes, i'm running macos 10.15, with node installed via homebrew. I have no idea why it fails like that, I'm no js expert.

Ok, I built the variable font with fontmake 2.3.0, this is what I got:

wavefont-VF.ttf.zip

but it's now obvious to me how I can reproduce those glitches you reported in the screenshot.

Where did you render the font? What OS or browser or app? What text string and variation settings?

dy commented 3 years ago

Observing the same issue with your font.

It fails for all values of wdth with algn = 0.5, in fact any align other than 1 and 0 fail. Example can be any string, eg. āĄĉĐĘġīĶŀʼnőŗśŜśŗőňľijħĜđĉă

Brave/Crome on Windows: image

Firefox on Windows: image

Works fine in Safari macOS and iPhone, edge is flat there.

That can possibly be platform problem, unless there are interpolation settings inside the font itself.

dy commented 3 years ago

It has something to do with order of points in contour. Swapping contour to

    <contour>
+     <point x="0" y="0" type="line"/>
      <point x="0" y="10" type="line"/>
      <point x="100" y="10" type="line"/>
      <point x="100" y="0" type="line"/>
-     <point x="0" y="0" type="line"/>
    </contour>

moves that saw to the bottom: image

anthrotype commented 3 years ago

the fact it only happens on some browsers and not all of them, and the fact that it only happens for TTFs, makes me think this might have to do with so-called "inferred variation deltas" which are only found in TrueType-flavoured variable OpenType fonts: https://docs.microsoft.com/en-us/typography/opentype/spec/gvar#inferred-deltas-for-un-referenced-point-numbers

Could you please try to rebuild the VF using the option --no-optimize-gvar and see if that changes the result?

dy commented 3 years ago

this might have to do with so-called "inferred variation deltas" rebuild the VF using the option --no-optimize-gvar

Brilliant. It worked! Many thanks. Is that still an issue then or can be closed?

anthrotype commented 3 years ago

hm, that's not good. It means there are bugs in the way the font's gvar is interpreted in some environments. It'd be better to file issues with the affected browsers. Could you provide an easy way to reproduce this, like a zip file containing the two fonts with and without inferred gvar deltas, and an html file using both with some strings and feature settings so one can load that in various browsers?

anthrotype commented 3 years ago

also note that disabling the gvar optimization makes the VF slightly bigger (by how much it depends).

dy commented 3 years ago

For this particular case there's no size difference. Attached the minimal demo: ttf-gvar-issue.zip

anthrotype commented 3 years ago

thanks! I think the the src: url(...) point to the same wavefont.ttf, but the files are named wavefont-good.ttf and wavefont-bad.ttf. Otherwise, works, thanks

Just tried on my macOS Chrome and could not reproduce.

dy commented 3 years ago

Whoops. This one is corrected. ttf-gvar.zip

Yes, it works on Mac/iPhone for me too.