Automattic / Automattic/node-canvas

registerFont does not allow for two or more fonts with the same (preferred) family name, style, and weight

Open
#1,572 30 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 or Feature
Cannot use two or more fonts that have the same preferredFamily, and the same style and weight, even though they are different fonts (they do have different family name, different postScriptName).

Example fonts:
1. CopalStd-Solid
* fontFamily: Copal Std Solid
* fontSubfamily: Regular
* preferredFamily: Copal Std
* preferredSubfamily: Solid
* postScriptName: CopalStd-Solid
Can download the font here: http://fontsgeek.com/fonts/Copal-Std-Solid

2. CopalStd-Decorated
* fontFamily: Copal Std Decorated
* fontSubfamily: Regular
* preferredFamily: Copal Std
* preferredSubfamily: Decorated
* postScriptName: CopalStd-Decorated
Can download the font here: http://fontsgeek.com/fonts/Copal-Std-Decorated

The above properties can be inspected by uploading the font(s) here: https://opentype.js.org/font-inspector.html and looking at the Naming table.

## Steps to Reproduce

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

Canvas.registerFont(__dirname + '/CopalStd-Decorated.otf', { family: 'Copal Std Decorated'});
Canvas.registerFont(__dirname + '/CopalStd-Solid.otf', { family: 'Copal Std Solid'});

const width = 800, height = 300;
const canvas = Canvas.createCanvas(width, height);
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, width, height);

ctx.fillStyle = '#FF0000';
ctx.font = '50px Copal Std Solid'
ctx.fillText('Copal Std Solid', 50, 100)
ctx.font = '50px Copal Std Decorated'
ctx.fillText('Copal Std Decorated', 50, 200)

const out = fs.createWriteStream(__dirname + '/test.jpeg')
const stream = canvas.createJPEGStream()
stream.pipe(out)
out.on('finish', () => console.log('The JPEG file was created.'))
// etc.
```

The result of this sample code is that both texts are rendered Copal Std Decorated (the font that was registered first), and it's impossible to render a text with Copal Std Solid (font that has the same preferredFamily, even though it is a different font).

![test](https://user-images.githubusercontent.com/5123207/81115294-5518f300-8ed8-11ea-8431-6b0ab8ce79f9.jpeg)

Expected:
![test2](https://user-images.githubusercontent.com/5123207/81116421-2ac83500-8eda-11ea-9e86-3b894c939adc.jpg)

## Your Environment
* Version of node-canvas: 2.6.1
* Environment: node 10.15.3 on Linux

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.