Change Font Weight in p5

p5.js Coding Questions
#1

I want to have a p5 sketch with the same font but multiple weights. In my index.html I have the following line:

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&display=swap" rel="stylesheet">

In the sketch I want to use the 400 and 800 weight Montserrat font. I tried using textStyle() but that only accepts the four constants. The reference for textStyle() uses the sentence “Note: this may be is overridden by CSS styling.”

Can anyone explain what the reference means. I know how to use CSS to get text to have a different weight, but how do I use that in p5?

1 Like
#2

not at all;

https://p5js.org/reference/#group-Typography

play example using a load .OTF
https://editor.p5js.org/kll/sketches/5eAJTcNGR

1 Like
#3

Okay, I got it now. So in google fonts, I just download the files for the weights I need and pre-load those weights as different font variables. Thanks!

1 Like
#4

just for change character size can use:
https://p5js.org/reference/#/p5/textSize

also check on the examples!
File / Examples / Typography: …

https://editor.p5js.org/p5/sketches/3dDjAZhs8O

1 Like