loadFont is not defined

akiersky · June 2015

Hi All!

Working on a project with the great p5js javascript lib and running into an issue using loadFont. When trying to use loadFont in preload() I get a "RefrenceError: loadFont is not defined" I see it in the github repo, however the versions from the cdn and bower give the ref error. I tried downloading manually from github (just the p5js file), but then I get "RangeError: argument 1 accesses an index that is out of range"

Here's a demo of what I'm trying to do:

var Helv;

function preload() {
    Helv = loadFont("HelveticaNeueLTStdCn.otf");
}
function setup() {
  textFont(Helv);
  text("it's helvetica!", 100, 100);
}

What am I missing?

GoToLoop · June 2015

Strange... it seems to be working in those examples from loadFont()'s reference: :|
http://p5js.org/reference/#/p5/loadFont

akiersky · June 2015

Hey Goto

Those don't seem to be working for me either. It's not able to even find the font file, I get "5273: Uncaught Error: Font could not be loaded: Not Found"

which is better than the not defined error, but still frustrating

GoToLoop · June 2015

Those examples work for me in the browser!
Better check which p5.js version you're using b/c those from the site uses latest 1!

GoToLoop · June 2015

http://p5js.org/reference/#/p5/loadFont

Tested in these 3 browsers here (Win8.1 64-bit):

Slimjet 64-bit 3.1.4.0 (based on Chromium 40.0.2214.93).
Cyberfox 36.0.4
IE11

akiersky · June 2015

aah, yes, they do work in the browser, sorry I misunderstood. I tried them in the desktop editor and got that error.

I've got 0.4.5 and doing a search in the source there is no "loadFont". I downloaded that through Bower though, so maybe there is something off with their links.

When I download the lib from github, it has the "loadFont" method, but then I get a different error: RangeError: argument 1 accesses an index that is out of range

I tried the CDN too and get the same "loadFont is not defined" error.

very strange....

Xxpr0sesserg0dxX · June 2015

load lōd/Submit noun 1. a heavy or bulky thing that is being carried or is about to be carried.

font1 fänt/Submit noun 1. a receptacle in a church for the water used in baptism, typically a freestanding stone structure.

Hope this helps :)

GoToLoop · June 2015

Get it from here: http://p5js.org/download/
Or here: https://cdnjs.com/libraries/p5.js

akiersky · June 2015

har har har... yeah.

On thing I just thought is I'm trying to run the files locally, do these need to be on a server?

akiersky · June 2015

@GoToLoop yep, tried both of those. Neither can find the loadFont method

GoToLoop · June 2015

Nowadays, only Firefox browser family would accept such operations while running w/o some server.

akiersky · June 2015

indeed firefox is my dev browser, but chrome can't find the loadFont method either.

akiersky · June 2015

Ok i got it. It was a few things going wrong creating the perfect storm of issues.

I was using firefox which allows for local loading of data files (using xlsx loading lib)
The CDN/Bower (and I think the downloaded version) were giving out of date versions. Not sure what was going on here, but they didn't have the loadFont method.
When I finally got a lib with the loadfont, the font file I was using was corrupt or something (ttf version failed with the "RangeError" the otf worked.)

Any thoughts on why loadfont would be missing from some places but not others?

Thanks for the help GoTo loop! (no thanks to Xxpr0sesserg0dxX :P )

akiersky · June 2015

One final issue here, once it's loading, I get a warning:

"> p5.js says: textFont was expecting a string for parameter #1, received [object Object] instead. textFont takes different numbers of parameters depending on what you want to do. Click this link to learn more:"

However the reference shows that an object is allowed with no additional parameters. any way to silence the warning at least?

blindfish · June 2015

I see no mention of loadFont in the p5 source code so I'd guess it hasn't been implemented/finished yet :(

GoToLoop · June 2015

Found out the mysterious problem. There are 2 versions 0.4.5! @-)
1 from May/27th & another "privileged & hidden" 1 from May/29th.

Apparently, the May/29th version is only available from: http://p5js.org/js/p5.min.js

That's why the examples from: http://p5js.org/reference/#/p5/loadFont work alright!
While we try in vain to force "official" May/27th to do the same! X(

Anyways, here's some test version I've made from Firefox Development Edition's WebIDE:
https://www.mozilla.org/en-US/firefox/developer/

"index.html":

<!DOCTYPE html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">

<title>Load Font</title>
<style>body { border: 1px solid black; padding: 0; margin: 0; }</style>

<!--<script src=http://cdnjs.CloudFlare.com/ajax/libs/p5.js/0.4.5/p5.js></script>-->
<script src="http://p5js.org/js/p5.min.js" defer></script>

<script src="loadfont.js" defer></script>

<h1>☺  Load Font Example  ☻</h1>

"loadfont.js":

var helvetica;

function preload() {
  helvetica = loadFont('HelveticaNeueLTStd-Cn.otf');
}

function setup() {
  noLoop();
  fill(0).noStroke();
  textFont(helvetica).textAlign(CENTER, CENTER).textSize(020);
}

function draw() {
  background('red');
  text('Helvetica Font!', width>>1, height>>1);
}

akiersky · June 2015

@gotoloop Excellent! I thought I was going crazy!

It looks like the May 29 version is packaged with the p5* ide. Do you get the textFont expecting a string error I mentioned above?

Thanks!

GoToLoop · June 2015

I've got loadFont() isn't a function until I've changed to: http://p5js.org/js/p5.min.js
The "HelveticaNeueLTStd-Cn.otf" I've got it after a search... :P

LadyK · October 2015

Hello,

I'm also getting an error for loadFont. Is it something that isn't quite integrated into the latest version of P5.js?

The name of the font is copied and pasted from the file in the data folder.

console error: Uncaught ReferenceError: loadFont is not defined

Code ------->

var fontReg;
var x = 0;

function preload(){
    // otf & ttf fonts
    fontReg = loadFont("data/NexaRustHandmade.otf");  // , drawSpecialText)
}

function setup(){
    createCanvas(800, 800);
    background(210);
    //fontReg = loadFont("data/NexaRustHandmade.otf", drawSpecialText);
    var myString = "Creative Coding rocks!";
}

function draw(){
    background(255);
    text(myString, x, height/2, 20, 50);
    x = x  - 5;


   textFont(fontReg, 48);
    fill(50, 200, 5);
    //noStroke();
    //textSize(52);
    text("We should be a special font", width/2, height/2);
}

/*
function drawSpecialText(fontReg){
    textFont(fontReg, 48);
    fill(50, 200, 5);
    //noStroke();
    //textSize(52);
    text("We should be special", width/2, height/2);

}

*/

GoToLoop · October 2015

@LadyK: http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

LadyK · October 2015

@GoToLoop Cheers! I was just looking for that link.

I've got a bug in here somewhere, and I can't seem to find it. :-??

GoToLoop · October 2015

Modified "loadfont.js" to use "NexaRustHandmade-Extended.otf" and hosted it here:
http://GoToLoop.GitHub.io/p5.js/

<meta charset=utf-8>
<meta name=viewport content=width=device-width,user-scalable=no,initial-scale=1>

<title>Load Font Test</title>

<script src="http://p5js.org/js/p5.min.js"></script>

<script>

// http://forum.Processing.org/two/discussion/11116/loadfont-is-not-defined
// http://GoToLoop.GitHub.io/p5.js/

// GoToLoop (2015-Oct-08)

var nexa;

function preload() {
  nexa = loadFont('data/NexaRustHandmade.otf');
}

function setup() {
  createCanvas(600, 400);
  noLoop();
  fill(50, 200, 5).noStroke();
  textFont(nexa).textAlign(CENTER, CENTER).textSize(040);
}

function draw() {
  background(0350);
  text('NexaRustHandmade Special!', width>>1, height>>1);
}

</script>

blindfish · October 2015

@LadyK: Are you using the latest p5.js? What browser are you using and how are you testing? Local files, a testing server or online? With local files I'd expect browser security to block the attempt to load the font file (this is a FAQ)... Except in Firefox dev - which is probably what @GoToLoop is using as he often reminds us :P

GoToLoop · October 2015

Indeed even w/ --allow-file-access-from-files param active for my Chrome-based browser (SlimJet 64):
"C:\Program Files\Slimjet\slimjet.exe" --allow-file-access-from-files
The local font is being refused to load. Although other resources like images & scripts still work. 8-}

And even though Firefox Development Edition is more appropriate for such web tasks, take notice that any Firefox-based browser can pull that out: \m/
Waterfox, Cyberfox, PaleMoon, Iceweasel, K-Meleon, Nightingale, etc.

BtW, I have to confess I had some trouble learning git commands in order to upload & commit an ".otf" font file to the "web host" repository: http://GoToLoop.GitHub.io/p5.js/ B-)

LadyK · October 2015

@blindfish - yes, I'm using the latest version of p5.js. I've been working in FireFox and FireFox Development Edition, all working locally. The issue tends to happen intermittently.

@GoToLoop - Thanks so much for the effort here. I do appreciate it! :)>- But, let me make sure I understand how to resolve the problem. In a nutshell, I've got to put everything up online, in order to work around browser security blocks. Am I understanding that correctly?

I'm teaching a group of students. My goal is getting them up and running as quickly as possible. It seems that the P5 IDE may be the best bet. But I welcome other tips and suggestions.

GoToLoop · October 2015

I've made the effort to host the sketch just so every1 could verify it's indeed working.
But as mentioned, Firefox-based browsers can directly run the sketch w/o some server.
Just copy & paste my sample sketch in a file called "index.html".
Have a subfolder called "data/" and a font file in it called "NexaRustHandmade.otf".
Copy "index.html"'s path and paste it as an address in any Firefox-based browser and hit Enter.
It should run just like if it were hosted somewhere else! \m/
BtW, those 3 top HTML <tags> are the minimum I've found to get everything up & running: O:-)

"index.html":

<meta charset=utf-8>
<title>Load Font Test</title>
<script src="http://p5js.org/js/p5.min.js"></script>

<script>

function preload() {
}

function setup() {
}

function draw() {
}

</script>

P.S.: <title></title> isn't that necessary. Just <meta charset=utf8> and the <script> tags. :-B

I've also heard adding in this <meta> tag below can make mobile canvas run much faster: ^#(^
<meta name=viewport content=width=device-width,user-scalable=no,initial-scale=1>

GoToLoop · October 2015

We can also post p5.js (and also PJS Mode) sketches in this site: :bz
http://p5js.SketchPad.cc/

Though I'm still waiting for them some months now to upgrade p5.js to anything higher than 0.4.5. :-@

GoToLoop · October 2015

Ah, almost forgot it: Shiffman's p5.js videos: L-)
https://Vimeo.com/channels/learningp5js

blindfish · October 2015

@LadyK: AFAIK the p5 IDE is currently Mac only. For beginners who don't have that luxury, or those who prefer Windoze/Linux I'd recommend Brackets. See my post on alternatives to sublime text. The built-in test server avoids domain security issues with local files and the on the fly update is really cool if you're also teaching HTML & CSS.

blindfish · October 2015

Sorry: looks like the Windoze version of the IDE is available now! Both versions are still beta though, so I'd test it for suitability first.

LadyK · October 2015

Hello,

Thanks @GoToLoop for the step by step. Sketch pad is a good idea and Shiffman's videos are the best. /:)

I've isolated the issue (and attributed the intermittent issue) of text to either not appear correctly (not using the font) and the error: Uncaught ReferenceError: loadFont is not defined to calling P5 from

< script src="http://cdn.jsdelivr.net/p5.js/0.3.16/p5.min.js">

versus

script language="javascript" type="text/javascript" >

Perhaps something is up with the version of P5 at http://cdn.jsdelivr.net/p5.js/0.3.16/p5.min.js :-?

Yet, I do get an error with the following code. The error varies on where I'm calling P5 from.

    var theFont;


    function preload(){

        theFont = loadFont('data/font1.otg');
    }

    function setup(){
        createCanvas(800, 600);
        textFont(theFont);

    }

    function draw(){
        background(255);

        text("Helloooooooo", 0, 200);


    }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>02text</title>

<!-- NS_ERROR_DOM_BAD_URI: Access to restricted URI denied with this uncommented below -->
<!--  <script src="libraries/p5.js" type="text/javascript"></script>  -->


<!-- with script tag below uncommented, I have an error at: 
theFont = loadFont('data/font1.otg');

saying "ReferenceError: loadFont is not defined"
 -->

<!--
<script language="javascript" type="text/javascript" src="http://cdn.jsdelivr.net/p5.js/0.3.16/p5.min.js"></script> 
-->




<!-- with the below uncommented, I get the following error:

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
-->
 <!-- <script src="http://p5js.org/js/p5.min.js"></script> -->

    <script src="libraries/p5.dom.js" type="text/javascript"></script> 
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

Here's my directory path. I'm still searching for this :bz . Getting closer!

Howdy, Stranger!

Categories

In this Discussion

loadFont is not defined

Best Answers

Answers

"index.html":

"loadfont.js":

"index.html":