p5.js loadFont function?

javascript p5.js
Lucy picture Lucy · Sep 30, 2014 · Viewed 9.3k times · Source

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!

Answer

OrionMelt picture OrionMelt · Sep 30, 2014

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>

Related questions

How do you get p5.js into a website?

I have searched nearly all over the internet, and i've gotten pretty close to an answer, but I still can't figure out how to use p5.js in a website. To be more specific, i want to be able to …

Read More
p5.js createCanvas not defined error. Uncaught ReferenceError

Problem: I am trying to use p5.js in my simple app, and including it thus: <script src="static/js/p5.js"> </script> What I've tried: If I put a debugger and look in the console, …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More