# Variable Fonts on p5.js

**URL:** <https://discourse.processing.org/t/variable-fonts-on-p5-js/19775>\
**Category:** Coding Questions\
**Created:** [April 14, 2020, 3:13pm UTC](https://discourse.processing.org/t/variable-fonts-on-p5-js/19775 "2020-04-14T15:13:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaniT3K](https://avatars.discourse-cdn.com/v4/letter/d/e95f7d/32.png) [@DaniT3K](https://discourse.processing.org/u/DaniT3K)\
**Post date:** [April 14, 2020, 3:13pm UTC](https://discourse.processing.org/t/variable-fonts-on-p5-js/19775/1 "2020-04-14T15:13:48Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [April 14, 2020, 7:15pm UTC](https://discourse.processing.org/t/variable-fonts-on-p5-js/19775/2 "2020-04-14T19:15:02Z")

</div>

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**](https://opentype.js.org/) could help on the way.  
It’s on Github [**here**.](https://github.com/opentypejs/opentype.js)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 18, 2020, 10:36pm UTC](https://discourse.processing.org/t/variable-fonts-on-p5-js/19775/3 "2020-04-18T22:36:52Z")

</div>

In Processing (Java), try Geomerative and Fontastic

- [https://github.com/rikrd/geomerative](https://github.com/rikrd/geomerative)
- [http://code.andreaskoller.com/libraries/fontastic/](http://code.andreaskoller.com/libraries/fontastic/)

For p5.js, check out:

- [generative-typography](https://github.com/mukulkhanna/generative-typography) a repo of p5.js generative type experiments
- [P5js typo](https://b2renger.github.io/p5js_typo/), a repo to experiment with typography using p5\*js and [Rune.font](https://github.com/runemadsen/rune.js). See also Rune’s [http://assets.runemadsen.com/classes/programming-design-systems/vectors-and-type-in-code/index.html](http://assets.runemadsen.com/classes/programming-design-systems/vectors-and-type-in-code/index.html)

---

<div class="post-metadata">

**Author:** ![moritzsalla](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moritzsalla/32/10593_2.png) [@moritzsalla](https://discourse.processing.org/u/moritzsalla)\
**Post date:** [September 14, 2020, 4:51pm UTC](https://discourse.processing.org/t/variable-fonts-on-p5-js/19775/4 "2020-09-14T16:51:15Z")

</div>

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

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

```

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

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

```

Hope this helps.