Automattic / Automattic/node-canvas

Font rendering issues with Google Fonts' Overpass (Variable and Static) on Node-Canvas

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

### 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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.