Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
  • Programming in Processing (java)
    • Starting with Processing (en)
    • Variables (en)
    • Classes and Objects (en)
    • Events und Functions (en)
    • Writing our own Functions (en)
    • Random Numbers (en)
    • Conditionals (en)
    • Loops (en)
    • Nested Loops (en)
    • Coordinates (en)
    • Arrays and Lists (en)
    • SVG + Images (en)
    • Motion and Temporality
    • Gesture Interactions
    • Using bitmaps as modifiers
    • Vectors
    • Animation
    • Animation 2
    • Simple Collision Detection
    • Sound
    • Typography

/
Typography

Typography

Nov 07, 2017

Using System fonts in processing is quite simple as seen in the examples below. This approach dynamically loads and displays the font, using vectors information, but be aware that this might not work for all fonts and appearance may vary from computer to computer. The advantages of this approach is that the fonts can easily be scaled without looking pixelated on the screen. 

PFont font;
 
size(200, 200);
String[] fontList = PFont.list();
printArray(fontList); // print out a list of all system fonts available. 

font = createFont("comic-sans", 32);
textFont(font);
text("I (heart) Helvetica", 10, 50);

Font can be saved within the sketch folder too, incase the font isn't installed on the computer running the sketch. 

PFont font;
size(200, 200);
background(0);
// the .ttf file should be saved in the sketch folder
font = createFont("Trebuchet-BoldItalic", 32);
textFont(font, 32);
text("word", 10, 50);
textSize(70);
text("word", 10, 100);

Alternatively fonts can be saved in the bitmap format that Processing uses. This will generally offer better performance and be more consistent across different computers, with the compromise that it can not be scaled up without looking pixelated. It is an option however, to save the font in multiple sizes. To create the .vlw file, open Processing and select the >Tools > Create Font> menu item.  

PFont font;
size(200, 200);
background(0);
// The vlw file should be saved in the sketch folder
font = loadFont("Trebuchet-BoldItalic-32.vlw");
textFont(font, 32);
text("word", 10, 50);
textSize(70);
text("word", 10, 100);
, multiple selections available,
{"serverDuration": 20, "requestCorrelationId": "24970076207f40caaafdefec63cebcf4"}