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

[barbhackk]

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):

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

[chearon]

That example looks right for me on my computer (macOS Sequoia). I don't have any suggestions right now, but font selection can be finicky since OSes don't have APIs to use a specific file.

I don't think variable fonts work since there are some Pango APIs we'd need to use.

[Andrekarma]

i confirm that on Windows there are many fonts that has this problem