# Font on Button Processing an controlP5

**URL:** <https://discourse.processing.org/t/font-on-button-processing-an-controlp5/28094>\
**Category:** Libraries\
**Created:** [February 26, 2021, 11:15am UTC](https://discourse.processing.org/t/font-on-button-processing-an-controlp5/28094 "2021-02-26T11:15:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![deerfox](https://avatars.discourse-cdn.com/v4/letter/d/b782af/32.png) [@deerfox](https://discourse.processing.org/u/deerfox)\
**Post date:** [February 26, 2021, 11:15am UTC](https://discourse.processing.org/t/font-on-button-processing-an-controlp5/28094/1 "2021-02-26T11:15:35Z")

</div>

Hi everyone,

I try to set my font on my button, i tried a few thinks like

```auto
public ControlFont(processing.core.PFont theFont)

```

but it doesen’t really work but its my first projekt with processing an controlP5,  
I also tried things I know from css and html…

here is my code :

```auto
import controlP5.*;

ControlP5 cp5;

int myColor = color(#B7AEAE);

int c1,c2;

float n,n1;

void setup() {
  
 PFont font;
font = loadFont("CorbelLight-48.vlw");

  size(510, 800);
  cp5 = new ControlP5(this);
    // create a new button with name '9'
  cp5.addButton("9")
     .setValue(9)
     .setPosition(370,60)
     .setSize(100,100);
 
   }

void draw() {
  background(#363936);
  stroke(#6A6664);
  fill(#466E9D);
  
  // x y width
  square(370, 60, 100);
 
     
  square(260, 60, 100);
  square(150, 60, 100);
  square(40, 60, 100);
  
  square(370, 170, 100);
  square(260, 170, 100);
  square(150, 170, 100);
  square(40, 170, 100);
  
  square(370, 280, 100);
  square(260, 280, 100);
  square(150, 280, 100);
  square(40, 280, 100);
  
  square(370, 390, 100);
  square(260, 390, 100);
  square(150, 390, 100);
  square(40, 390, 100);
  
}

```

>

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2021, 7:24pm UTC](https://discourse.processing.org/t/font-on-button-processing-an-controlp5/28094/2 "2021-02-26T19:24:56Z")

</div>

Yeah, you need to pass the font to the button. But not in the `cp5.addButton("9")` section but separately

**Sketch**

```auto
// http://www.sojamo.de/libraries/controlP5/examples/use/ControlP5controlFont/ControlP5controlFont.pde 

import controlP5.*;

ControlP5 cp5;

int myColor = color(#B7AEAE);
int c1, c2;
float n, n1;

void setup() {
  size(510, 800);

  // load / make a new font. ControlFont is a wrapper for processing's PFont
  // with processing 1.1 ControlFont.setSmooth() is not supported anymore.
  // to display a font as smooth or non-smooth, use true/false as 3rd parameter
  // when creating a PFont:

  PFont pfont1;
  // pfont1 = createFont("CorbelLight-48.vlw", 14);
  // pfont1 = createFont("Arial", 20, true); // use true/false for smooth/no-smooth
  // pfont1 = createFont("Alien Encounters", 40, true); // use true/false for smooth/no-smooth
  pfont1 = createFont("Calvin", 40, true); // use true/false for smooth/no-smooth

  ControlFont cfont = new ControlFont(pfont1, 40);

  cp5 = new ControlP5(this);
  // create a new button with name '9' / A 
  cp5.addButton("A")
    .setValue(9)
    .setPosition(370, 60)
    .setSize(100, 100);
  //

  //
  // change the font of the captionlabels 
  // for button created earlier.
  cp5.getController("A")
    .getCaptionLabel()
    .setFont(cfont)
    .toUpperCase(false)
    .setSize(40)
    ;
}

void draw() {
  background(#363936);
  stroke(#6A6664);
  fill(#466E9D);

  // x y width
  square(370, 60, 100);

  square(260, 60, 100);
  square(150, 60, 100);
  square(40, 60, 100);

  square(370, 170, 100);
  square(260, 170, 100);
  square(150, 170, 100);
  square(40, 170, 100);

  square(370, 280, 100);
  square(260, 280, 100);
  square(150, 280, 100);
  square(40, 280, 100);

  square(370, 390, 100);
  square(260, 390, 100);
  square(150, 390, 100);
  square(40, 390, 100);
}

//void square(float x, float y, float size1) {
// rect(x, y, 
// size1, size1);
//}
//

```

---

<div class="post-metadata">

**Author:** ![deerfox](https://avatars.discourse-cdn.com/v4/letter/d/b782af/32.png) [@deerfox](https://discourse.processing.org/u/deerfox)\
**Post date:** [February 27, 2021, 10:16am UTC](https://discourse.processing.org/t/font-on-button-processing-an-controlp5/28094/3 "2021-02-27T10:16:40Z")

</div>

Thank you Chrisir!

You are the hero of my day !  
and thanks alot for the explanations!