Typography

p5.js Tutorials
Tutorials
/
p5.js Tutorials
/
Creating Variables
/
Typography
Previous:
Creating Variables

Typography

October 30, 2021

example p5.js javascript random typography

This sketch calls the loadFont() function to load a custom font, which you can use to style your text.

Click here to edit this code in the p5.js editor.

Note: This code requires the happycoding.ttf file in your sketch directory, or you can use the full URL like https://happycoding.io/fonts/happycoding/happycoding.ttf.

happy coding font

Remix Ideas

  • Find a font you like and use it to style your text.
  • Make every letter a different color.
  • Make every letter a different font!
Previous:
Creating Variables

Creating Variables Examples

Triangle Inset Triangle Inset▶

Draw triangles inside triangles inside triangles.

Pumpkin (with Variables) Pumpkin (with Variables)

Use variables to draw a pumpkin.

Random Pumpkin Random Pumpkin

Use the random() function to draw a random pumpkin.

Random Skull Random Skull

Use the random() function to draw a random skull.

Typography Typography

Style your text with custom fonts.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Comments

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!