# Change Font Weight in p5

**URL:** <https://discourse.processing.org/t/change-font-weight-in-p5/12514>\
**Category:** Coding Questions\
**Created:** [July 5, 2019, 2:45am UTC](https://discourse.processing.org/t/change-font-weight-in-p5/12514 "2019-07-05T02:45:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![redmoncoreyl](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@redmoncoreyl](https://discourse.processing.org/u/redmoncoreyl)\
**Post date:** [July 5, 2019, 2:45am UTC](https://discourse.processing.org/t/change-font-weight-in-p5/12514/1 "2019-07-05T02:45:31Z")

</div>

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

```auto
<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?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [July 5, 2019, 3:11am UTC](https://discourse.processing.org/t/change-font-weight-in-p5/12514/2 "2019-07-05T03:11:16Z")

</div>

> [@redmoncoreyl](#):
>
> I know how to use CSS to get text to have a different weight, but how do I use that in p5?

not at all;

> **[reference | p5.js](https://p5js.org/reference/#group-Typography)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

play example using a load .OTF

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/5eAJTcNGR)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![redmoncoreyl](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@redmoncoreyl](https://discourse.processing.org/u/redmoncoreyl)\
**Post date:** [July 5, 2019, 3:18am UTC](https://discourse.processing.org/t/change-font-weight-in-p5/12514/3 "2019-07-05T03:18:47Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [July 5, 2019, 3:20am UTC](https://discourse.processing.org/t/change-font-weight-in-p5/12514/4 "2019-07-05T03:20:43Z")

</div>

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

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

[https://editor.p5js.org/p5/sketches/3dDjAZhs8O](https://editor.p5js.org/p5/sketches/3dDjAZhs8O)