[p5.js 2.0 Beta Bug Report]: Some google fonts don't load

[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.0 beta 1

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

I'm not sure what the difference is, but I was playing around with loading google fonts, and I have an example of one that works and one that doesn't:

let font

async function setup() {
  createCanvas(400, 400);
  
  // ok
  // font = await loadFont('https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap')
  
  // not ok?
  font = await loadFont('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap')
}

function draw() {
  background(220);
  textFont(font)
  textSize(20)
  text('test', 50, 50)
}

Live: https://editor.p5js.org/davepagurek/sketches/c8__rjh8_

Anyone have any ideas what Jersey 10 does that Sniglet doesn't that would the error Failed to create FontFace for "Jersey 10" to be thrown? Maybe the number in the name?

[Sahil-Gupta584]

hey @davepagurek i tried with more fonts but all fonts loading are failing , here is the code when font are loaded in p5js,

p5.prototype.loadFont = function(path, onSuccess, onError) {
  p5._validateParameters('loadFont', arguments);
  const p5Font = new p5.Font(this);

  const self = this;
  opentype.load(path, (err, font) => {
    if (err) {
      p5._friendlyFileLoadError(4, path);
      if (typeof onError !== 'undefined') {
        return onError(err);
      }
      console.error(err, path);
      return;
    }

    p5Font.font = font;

issue is that opentype.js only supports font imported from any file or array buffer and not from direct url, like,
opentype.load('fonts/Roboto-Black.ttf', function(err, font) {...

do you planning to support fonts from remote urls in p5js? I am glad to continue as my first issue.

[davepagurek]

Hi @Sahil-Gupta584, I believe the code you're looking at is on the main branch, which is for p5 1.x. We've changed up how font loading works in 2.0, which lives on the dev-2.0 branch. The new implementation of loadFont is here:

p5.js/src/type/p5.Font.js

Line 530 in d17c3ee

p5.prototype.loadFont = async function (...args/*path, name, onSuccess, onError, descriptors*/) {

We've replaced OpenType with Typr, a smaller dependency, and also don't rely on it at all for drawing in 2D mode, which instead can deal with CSS directly.