processing / processing/p5.js

[p5.js 2.0+ Bug Report]: Text weight performance worse than other font properties, like size

Open
#8,732 7 comments 0 reactions 2 assignees View on GitHub

@Nixxx19 is already working on this.

Since May 3, 2026.

Area:Typography p5.js 2.0+
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
p5.js version

2.2.3

Web browser and version

Chrome 147, Firefox 149

Operating system

MacOS 15.2

Steps to reproduce this
Steps:
  1. Load a variable font
  2. In a loop, draw stuff with different font weights

The frame rate is much lower for me when changing font weight compared to font size. E.g. in the test sketch below, on Chrome I get 8fps with textWeight vs 60 for textSize; on Firefox I get 30fps vs 60.

Snippet:
// noprotect

let font
let fpss = []
let fpsDisplay
async function setup() {
  createCanvas(400, 400);
  font = await loadFont("https://fonts.gstatic.com/s/roboto/v47/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf")
  fpsDisplay = createP()
}

function draw() {
  background(220);
  textAlign(CENTER)
  textSize(10)
  noStroke()
  fill('red')
  textFont(font)
  
  const t = millis()
  const n = 40
  for (let x = 0; x < n; x++) {
    for (let y = 0; y < n; y++) {
      // textSize(sin(t * 0.02 + x*0.3 + y*0.5) * 5 + 10)
      textWeight(sin(t * 0.02 + x*0.3 + y*0.5) * 200 + 400);
      text(
        'a',
        map(x+0.5, 0, n, 0, width),
        map(y+0.5, 0, n, 0, height)
      )
    }
  }
  
  fpss.push(frameRate())
  if (fpss.length > 20) fpss.shift()
  fpsDisplay.html(round(fpss.reduce((acc, next) => acc+next, 0)/fpss.length))
}

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.