p5.js loadFont function?

Question

How can I change the font in p5.js? It does not recognize the Processing term "loadFont," does not carry over a font from CSS, nor does it let me put in a .vlw file or link to a GoogleFont. At least, not in any way I have tried.

The references page only contains "text" and "textFont" options (in the Typography section at the end of the p5.js references page), neither of which allow for actually specifying a font.

I have also tried the

text.style('font-family', 'Walter Turncoat');

option listed here (https://github.com/lmccart/p5.js/wiki/Beyond-the-canvas) to no avail. It actually broke the whole page. In CSS:

@font-face {
    font-family: 'Walter Turncoat';
    src: url('http://fonts.googleapis.com/css?family=Walter+Turncoat');
}

Processing version did not work:

var type = loadFont("AmericanTypewriter-48.vlw");
var smallType = loadFont("AmericanTypewriter-14.vlw");

Also,

var type = "Helvetica";

which they have in the examples for text and textFont does not work.

There has to be a way to have another font. Please help!

score 5 · Answer 1 · answered Sep 30 '14 at 01:05

The examples given in the reference work fine. Run code snippet below for results. What do you mean when you say it doesn't work for you?

function setup() {
  createCanvas(640, 480);
}

function draw() {
  fill(0);
  textSize(36);
  textFont("Georgia");
  text("Hello World! in Georgia.", 12, 40);
  textFont("Arial");
  text("Hello World! in Arial.", 12, 100);
  textFont("Walter Turncoat");
  text("Hello World! in Walter Turncoat.", 12, 160);
}

<link href="http://fonts.googleapis.com/css?family=Walter+Turncoat&.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/p5.js/0.3.8/p5.min.js"></script>

score 2 · Answer 2 · answered Jan 20 '16 at 06:14

To load a font in p5.js you need a .ttf or .otf file, p5 doesn't work with .vlw files. So to use a font in p5 you need to:

Get a .ttf or .otf font file. This font file will be loaded on execution time to your app.
Declare a global variable to keep the font.
Load the font with loadFont in a preload function.
After the font is loaded you must use textFont() to tell p5 that this is the font to be used.
Print someting with text().

Here is an example:

var myFont, fontReady = false;

function fontRead(){
    fontReady = true;
}

function preload() {
    myFont = loadFont("./fonts/MyfontFile.ttf", fontRead);
}

function setup() {
    createCanvas(720, 400);
    doyourSetup();
}

function draw() {
    background(255);
    if (fontReady) {
        textFont(myFont);
        text("Hello World!", 10, 30);
    }
}

boolean is not necessary, preload will finish before setup is called — rednoyz, Apr 27 '17 at 02:14
That's true, preload will be called before setup but the font may not be available due to some error condition on the loadFont call. — Roberto Stelling, May 04 '17 at 23:07

score 1 · Answer 3 · answered Apr 19 '17 at 14:11

You need to load the font in preload:

var font;

function preload() {
    font = loadFont('thefont.ttf');
}

function setup() {
    createCanvas(600, 400);
    textFont(font);
}

function draw() {
    background(255);
    text('The Text', 280, 300);
}

score 0 · Answer 4 · edited Feb 26 '17 at 18:10

0

According to the docs, if you have a font file that p5 recognizes (such as otf, ttf ect...), you can load that font file and than use it with the following 2 lines of code:

var myFont = loadFont('customfont.ttf');
textFont(myFont);

and then write with the font like this:

text('Stack overflow', 2,2);

edited Feb 26 '17 at 18:10

Pramesh Bajracharya

2,153
3
28
54

answered Aug 19 '15 at 13:44

Michael Quintero

45
5

This worked for me. But, had to run it with a local server. I wonder why?. Without using localserver (Apache in my case from Xampp) it shows error in console - "XML_HTTP_REQUEST_ERROR" – Pramesh Bajracharya Feb 27 '17 at 02:11
@PrameshBajracharya the "file:" protocol can't do CORS. – Benny Jobigan Jun 10 '18 at 19:16

score 0 · Answer 5 · answered Aug 05 '21 at 18:14

var myfont;
function preload() {
font = loadFont('font.ttf)
}
function setup{
createCanvas(400, 400)
}
function draw{
textFont(myfont)
text("Hello", 200, 200)
}

There is no need for a ready function because newer versions of p5.js will not display the project until it is finshed loading if it is in the preload function.

p5.js loadFont function?

5 Answers5