Automattic / Automattic/node-canvas
Font rendering issues with Google Fonts' Overpass (Variable and Static) on Node-Canvas
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.2k
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 1
Description
### Problem Description
I'm encountering font rendering issues when using the Overpass font (from Google Fonts) in Node-Canvas. Both the variable and static versions of the font fail to render properly, producing warnings and fallback to system fonts.
This issue occurs on both Windows 10 (64-bit) and macOS Ventura, even when using the latest Pango and Node-Canvas versions.
**System Setup:**
OS (Windows): Windows 10, 64-bit
Node-Canvas Version (Windows): canvas@next
OS (macOS): macOS Ventura
Node-Canvas Version (macOS): canvas 2.11.2 (built from sources)
Pango Version: Latest
**Steps to Reproduce:**
Download Overpass (Google Fonts) on your machine.
Use the following Node.js script to try and render text using the Overpass font (with variable font or only on static font):
```js
const fs = require('fs');
const path = require('path');
const Canvas = require('canvas');
function fontFile(name) {
return path.join(__dirname, name);
}
Canvas.registerFont(fontFile('Overpass-Black.ttf'), { family: 'Overpass' });
const canvas = Canvas.createCanvas(320, 320);
const ctx = canvas.getContext('2d');
ctx.fillStyle = "#FFF";
ctx.fillRect(0, 0, 320, 320);
ctx.fillStyle = "#333";
ctx.font = '105px Overpass';
ctx.fillText('Vai', 0, 140);
canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'font.png')));
```
Expected Behavior:
- The text should render correctly using the Overpass font.
Actual Behavior:
- On Windows, I get the following error:
```(process:20100): Pango-WARNING **: 14:44:26.763: couldn't load font "Overpass Heavy Not-Rotated 105px", falling back to "Sans Heavy Not-Rotated 105px", expect ugly output.```
On macOS, the same issue occurs even with the latest version of Pango and a manually built version of Node-Canvas.
**Additional Information:**
- The problem seems to be specific to variable fonts or some static fonts like Overpass. Other fonts static work fine with Node-Canvas on the same setup (like Roboto, Montserrat...)
- I have tested both static versions of the Overpass font from Google Fonts, and both exhibit the same behavior.
- The font renders fine in other contexts, such as system text editors or browser-based environments.
As Overpass is a popular font from Google Fonts, it is important for Node-Canvas to support it correctly, whether it's used in its variable or static forms. Given that other fonts work without issue, this might indicate a deeper problem either with the font itself or with how Node-Canvas (via Pango) handles this particular font's properties (such as weight or stretch).
Finding a solution to this problem would not only help me but also improve compatibility for other developers who rely on Google Fonts in their Canvas-based projects.
Thanks,
Sébastien
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.