Automattic / Automattic/node-canvas

registerFont - One font completely dismisses another font

Open
#2,484 2 comments 0 reactions 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

Hello, I have 3 custom font files, which contain the same font (`Beach Pro Bold`). I want to register them under 3 different families: `Beach Pro Bold`, `Beach Pro Bold1`, `Beach Pro Bold2`.
I register them properly, but when I am trying to render 3 different texts (one text per font family above), I see that `Beach Pro Bold1` renders as the default system's font (screenshot).

```
registerFont('./Beach Pro Bold_20250117181956_20250125071027.otf'), {
family: 'Beach Pro Bold',
weight: 700,
style: 'normal'
})
registerFont('./Beach Pro Bold_20250119095142_20250125071053.otf'), {
family: 'Beach Pro Bold1',
weight: 700,
style: 'normal'
})
registerFont('./Beach Pro Bold_20250119095811_20250125071118.otf'), {
family: 'Beach Pro Bold2',
weight: 700,
style: 'normal'
})

const canvasNode = createCanvas(500, 500)
const ctxNode = canvasNode.getContext('2d')

ctxNode.font = '12px "Beach Pro Bold"';
ctxNode.fillText('Beach Pro Bold', 250, 10);
ctxNode.font = '12px "Beach Pro Bold1"';
ctxNode.fillText('Beach Pro Bold1', 250, 30);
ctxNode.font = '12px "Beach Pro Bold2"';
ctxNode.fillText('Beach Pro Bold2', 250, 50);
```

Weird enough, if I remove `Beach Pro Bold2`, then `Beach Pro Bold1` will render correctly.

System:
Node: 18.20.6
Canvas: 2.10.2
OS: built using Docker image node:18-alpine
Misc: It is just vanilla canvas project

![Image](https://github.com/user-attachments/assets/d78b7236-2a22-43fc-845e-680e1ed5814d)

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.