Variable Fonts on p5.js

[DaniT3K]

Hello guys, I’m Daniel a graphic designer from Portugal ending my master degree! For my thesis im working with variable fonts.

Does anyone knows or have a sketch on how to implement variable fonts on p5.js? Im struggling to do it…

Thanks! hope you can help me!

[noel]

Hi @DaniT3K
I’ve no experience in P5.js, but if it was plain P5 I would go for the Geomerative lib.
But since it is java script, maybe this could help on the way.
It’s on Github here.

[jeremydouglass]

In Processing (Java), try Geomerative and Fontastic

• https://github.com/rikrd/geomerative
• http://code.andreaskoller.com/libraries/fontastic/

For p5.js, check out:

• generative-typography a repo of p5.js generative type experiments
• P5js typo, a repo to experiment with typography using p5*js and Rune.font. See also Rune’s http://assets.runemadsen.com/classes/programming-design-systems/vectors-and-type-in-code/index.html

[moritzsalla]

You can directly manipulate the css font feature settings within the draw loop. No need for a canvas.

elem.style.fontVariationSettings = `'wght' ${wght}`;

Don’t forget to map your input to the variable font’s supported range if necessary:

const wght = Math.floor(map(someInputValue, 0, 1200, 100, 800));

Hope this helps.