
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`.

![Letters with cutouts](share-card.jpg)

The font is [Jost](https://fonts.google.com/specimen/Jost?query=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/2602)
* [https://github.com/google/fonts/issues/2666](https://github.com/google/fonts/issues/2666)
* [https://github.com/indestructible-type/Jost/issues/85](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`](https://github.com/Automattic/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`:

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

Using server-side `node-canvas`:

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

Using server-side `pureimage`:

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


Workarounds for letters displaying with cutouts on MacOS.

1 posts tagged “fonts”

Buggy Font Display on MacOS