Fonts, Variable weight

[hellonearthis]

Increasing Access

Unsure

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Friendly error system
• [ ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [X] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Feature enhancement details

The current text() function doesn't allow for font weight on variable fonts.

The current canvas usage is like below, with a fontweight set to 500:

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.font='500 30px Arial';
ctx.fillText('Hello World', 10,30);

Thanks

[alec-kr]

Hey @hellonearthis, I would be happy to work on this issue.

Are you suggesting that we add a "fontWeight" attribute to the text() function? Example:

text(str, x, y, fontWeight, [x2], [y2])

Or should a fontWeight() function be added instead? Example:

fontWeight(500);
text("Hello World!", 10, 10, 70, 80)

[dhowe]

Also need to consider that a fontWeight param or function will have no effect on user-supplied fonts (open-type, etc.)

But in any case I would def. vote against: text(str, x, y, fontWeight, [x2], [y2]), as it breaks backwards compatibility

Maybe I am misunderstanding, but I'm also not seeing any difference between the two cases below:

function setup() {
  let c = createCanvas(400, 400);
  background(0);

  let ctx = c.elt.getContext('2d');
  ctx.font = "500 30px Arial";
  ctx.fillText("Hello World", 10, 30);

  fill(255);
  textFont("500 30px Arial");
  text("Hello World", 10, 60)
}

[alec-kr]

consider that a fontWeight param or function will have no effect on user-supplied fonts (open-type, etc.)

Yes, this function will only be able to manipulate built-in fonts.

I'm also not seeing any difference between the two cases below

I'm having the same issue here. I think @hellonearthis is referring to a function that can adjust the thickness of the font's letters. However, the example code provided does not seem to replicate the issue.

[limzykenneth]

I think with limited support (only built-in fonts) I'm less inclined to include this feature as is.

One is that it create special cases that can be easily missed and potentially create confusion from users about why their custom font doesn't work with font weight. Two is that even in the case that a developer is using built-in font, there is no guarantee that their users will have the same font and same variable weight support available in their system.

[alec-kr]

@limzykenneth Do you think this issue should be closed since it would not be practical to implement?

[limzykenneth]

I would prefer such a feature be available for user loaded font so unless than can be implemented I would suggest shelving this for now.

[arthurcloche]

Hey, i was just pointed to this by @davepagurek.

I did some extensive explorations and i came with this little library to handle variable fonts. p5.variableFont I think it provides some answer to some of the questions above and shows some directions on how to modify the current p5 functions without breaking anything and be backward compatible ( as far back as the implementation of the current textFont() function, which is where most of the font transformation takes place ).

[davepagurek]

For some extra context, this would help create CSS font definitions out of loadFont() fonts, allowing the 2D context to change the variables in the font when drawing it. It looks like that would unlock variable font support for the 2D renderer for all the ways you can load a font into p5 right now, which is great!

To make that also work in WebGL it looks like we'd still need to update opentype.js (or an equivalent) to be able to get the path information for a font given the values for variables. The p5.variableFont library already starts reading into the font tables to see what variables exist, so it looks like a great jumping off point for anyone who might be interested in trying to add that to opentype.js.

[munusshih]

This is great! @amehowc I'm so excited and will definitely use it for the future.

I feel like this is probably the best workaround so far as I too looked into the way p5 rendered fonts and noticed there are two ways (one through CSS @font-face, one through opentype.js). Initially I created this sketch here where I just created many html canvas and each control their css for font-variation-settings and render them back on the main p5 canvas.

But your workaround is definitely the better solution! I don't think, however, this should be integrated into the main p5 library though. I think before p5 sort out its relationship with opentype.js this should remain a separate community library!