Oblique text using CSS directly in P5

p5.js Coding Questions
1

Hey guys,

I want to change the font weight and oblique angle directly in p5.
I’ve managed to change the weight this way:

p.style('font-weight', map(mouseX, 0, width, 1, 999))

but cannot find a way to change the slant / oblique / italic angle.

thanks in advance!

1 Like
2

Unlike font-weight, font-style does not take numeric values. If you want to have a variety of font styles, then, look for the variable fonts that have the axis. Then, you will be able to control with css.
For instance, check this font: Crack Grotesk VAR – Variable Fonts

3

I’d say skew may do what you need depending on the content - specifically if you only have one line. As you can see in this sketch

https://editor.p5js.org/micuat/sketches/heSSqMy-6

it does skew the content but the effect shifts the lines far from the center and may not be what you want for multiline text. I hope this helps!