Automattic / Automattic/node-canvas

When rendering text, registering AdventPro overrides any other registered font

Open
#2,305 5 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

## Issue

hi,

I'm having this strange bug where registering [AdventPro](https://fonts.google.com/specimen/Advent+Pro) as a custom font will override any other registered font, even when not referenced at all in the canvas.

The code snippet below produces the following image. This text is using AdventPro, i.e. the wrong font:

![Text sample written in AdventPro](https://github.com/Automattic/node-canvas/assets/12766310/d1b5da4a-fae9-4291-b1cf-f2fa22e9d108)

Expected output with the right font (after removing `registerFont` for AdventPro):

![Sample text written in ZenTokyoZoo](https://github.com/Automattic/node-canvas/assets/12766310/f193aee0-a75e-4471-860d-8119d5b0ec0b)

Note that the order of the `registerFont` calls doesn't matter.

thank you,

## Steps to Reproduce

Download and save [AdventPro-VariableFont_wdth,wght.ttf](https://fonts.google.com/specimen/Advent+Pro) and [ZenTokyoZoo-Regular.ttf](https://fonts.google.com/specimen/Zen+Tokyo+Zoo) in the same directory as the following script. Run the script to generate `output.png`.

```js
const canvas = require('canvas');
const fs = require('fs');

// Font that should be used
canvas.registerFont('./ZenTokyoZoo-Regular.ttf', { family: 'ZenTokyoZoo' });

// Comment the following out to see the expected behaviour
canvas.registerFont('./AdventPro-VariableFont_wdth,wght.ttf', { family: 'AdventPro' });

// Canvas
const cvs = canvas.createCanvas(768, 128);
const ctx = cvs.getContext('2d');

// White background
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.fillRect(0, 0, 768, 128);

// Text
ctx.font = '40px "ZenTokyoZoo"';
ctx.fillStyle = '#000000';
ctx.fillText('Willfull denial until it\'s my turn', 64, 64);

// Save to file
fs.writeFileSync('./output.png', cvs.toBuffer());
```

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): 2.11.2
* Environment (e.g. node 4.2.0 on Mac OS X 10.8): Tested with node v18.17.0, v20.9.0. Ubuntu 20.04.1 LTS
* Neither font is installed on my system

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.