Buggy Font Display on MacOS

Working on a side-project which I'll be releasing soon-ish, and one of the issues I encountered was this manky display of a font I was rendering using canvas.

The font is Jost and it displays perfectly fine on Google Fonts and when rendered as a variable font through CSS, but would have this odd cut-out thing going on when rendered with canvas.

I found a few tickets about this on GitHub:

• https://github.com/google/fonts/issues/2602
• https://github.com/google/fonts/issues/2666
• https://github.com/indestructible-type/Jost/issues/85

It didn't matter from where you sourced the woff font files, the issue would persist.

One suggestion that seemed to have positive results was to use the variable font, however this isn't supported with the node-canvas package I was using to use canvas server-side. Using a local copy of the standard ttf seemed to do the trick, though. Just register it as you would other fonts before use.

Using client-side canvas:

Loading...
const font = new FontFace('Font Family', 'url(/assets/fonts/FontName.ttf)');
await font.load();
document.fonts.add(font);

Using server-side node-canvas:

Loading...
Canvas.registerFont(path.resolve('public/assets/fonts/FontName.ttf'), {
    family: 'Font Family',
});

Using server-side pureimage:

Loading...
const font = PureImage.registerFont(path.resolve('public/assets/fonts/FontName.ttf'), 'Font Family', fontWeight, fontStyle, fontVariant);
font.loadSync();