[p5.js 2.0 Bug Report]: text measurement broken in Chrome when font names contain special characters and no spaces

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.1.2 (All 2.x)

Web browser and version

Chrome

Operating system

MacOS

Steps to reproduce this

Steps:

1. Load a font and specify a CSS font name that has special characters and no spaces
2. Draw text with the font
3. Draw a rectangle around the font using fontWidth() to measure the width

On Chrome, it looks like this:

It works when there's a space in the name because p5 puts quotes around the font name automatically in that case. Seems like for Chrome, we need to put quotes around the name regardless when there are special characters. Firefox seems to auto-add quotes, indicating that they parse the family name correctly.

Snippet:

let font

async function setup() {
  // Broken
  font = await loadFont('font.otf', 'Söhne-Kräftig')
  // Works
  // font = await loadFont('font.otf', 'Söhne Kräftig')
  console.log(font.name)
  const cnv = createCanvas(400, 400, WEBGL);
  fill(0)
  textAlign(CENTER, CENTER)
  textFont(font)
  textSize(40)
  text('Healthy habits', 0, 0)
  rectMode(CENTER)
  noFill()
  rect(0, 0, fontWidth('Healthy habits'), textLeading())
  console.log(cnv.textDrawingContext().font)
}

https://editor.p5js.org/davepagurek/sketches/3rlNIw6SX