Automattic / Automattic/node-canvas

Calling `registerFont()` on multiple fonts in same family appears to break prior registration (Avenir Next Rounded)

Open
#2,382 0 comments 1 reaction 0 assignees View on GitHub
Text & Fonts
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

## Issue or Feature

We have encountered a bug that occurs with the Avenir Next Rounded font and are unsure if this is an issue with node-canvas or the fonts themselves. I have inspected the fonts on the [opentype Font Inspector](https://opentype.js.org/font-inspector.html) and did see they have different metadata.

It appears that when loading both fonts, only the _last_ font to load will render. The other text field is rendered with a default font. This behavior can be recreated using the below example and by changing the order of which font is loaded first.

Avenir Next Rounded is a licensed font. We see this behavior locally and also when running node-canvas in AWS Lambda.

### Example when the _Demi_ version is registered last
![fontTest](https://github.com/Automattic/node-canvas/assets/2940595/74b30a9e-3dd5-40af-9bc9-9b3abb15ebaa)

### Example when the _Medium_ version is registered last
![fontTest](https://github.com/Automattic/node-canvas/assets/2940595/ef30199d-b5fd-4b05-b5c1-e969309536d9)

## Steps to Reproduce

```js
import { createCanvas, registerFont } from 'canvas'
import fs from 'fs'

registerFont("/private/tmp/Avenir Next Rounded Medium.ttf", {
family: "Avenir Next Rounded Medium",
});
registerFont("/private/tmp/Avenir Next Rounded Demi.ttf", {
family: "Avenir Next Rounded Demi",
});

const canvas = createCanvas(600, 200)
const ctx = canvas.getContext('2d')
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.font = '40px "Avenir Next Rounded Demi"'
ctx.fillStyle = 'black'
ctx.fillText('Avenir Next Rounded Demi', 10, 50)

ctx.font = '40px "Avenir Next Rounded Medium"'
ctx.fillStyle = 'black'
ctx.fillText('Avenir Next Rounded Medium', 10, 150)

const filePath = '/private/tmp/fontTest.png'
const out = fs.createWriteStream(filePath)
const stream = canvas.createPNGStream()
stream.pipe(out)
out.on('finish', () => console.log('The PNG file was created.', filePath))
```

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): 2.11.2
* Environment (e.g. node 20.9.0 on macOS 14.1.1): node v18.17.1 / macOS 14.4.1 / AWS Lambda (node 18)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.