loadFont is not defined

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?

Answers

  • edited June 2015

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

  • 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

  • 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!

  • edited June 2015

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

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

    1. Slimjet 64-bit 3.1.4.0 (based on Chromium 40.0.2214.93).
    2. Cyberfox 36.0.4
    3. IE11
  • 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....

  • 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 :)

  • 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?

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

  • edited June 2015 Answer ✓

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

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

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

    1. I was using firefox which allows for local loading of data files (using xlsx loading lib)
    2. 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.
    3. 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 )

  • 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?

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

  • edited October 2015 Answer ✓

    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);
    }
    

  • @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!

  • edited 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

  • edited 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 Cheers! I was just looking for that link.

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

  • edited 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>
    
  • @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

  • edited 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-)

  • @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.

  • edited 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>

  • edited 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. :-@

  • edited October 2015

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

  • @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.

  • 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.

  • edited 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!

    Directory

  • @LadyK said:

    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">

    If you read through this thread carefully you'll see that loadFont wasn't working until 0.4.5, and even then only after a glitch in the code released was fixed. It looks like the version you're try to pull from cdn.jsdelivr.net is 0.3.16. That's from January!

    You said:

    yes, I'm using the latest version of p5.js.

    [-X [-X [-X

    On a project this young 0.3.16 is aeons ago in the development process. Not surprisingly if you search for loadfont you won't find it in that version... Try using the latest release:

    http://cdn.jsdelivr.net/p5.js/0.4.15/p5.min.js

  • edited October 2015

    Besides http://cdn.JSdelivr.net/p5.js/0.4.15/p5.min.js, there's also:
    http://cdnjs.CloudFlare.com/ajax/libs/p5.js/0.4.15/p5.min.js

    But my favorite is the 1 I've used in my template example: http://p5js.org/js/p5.min.js
    B/c it always points to the latest release and it's a fixed URL path! \m/

    I'm teaching a group of students. My goal is getting them up and running as quickly as possible.

    So you should consider using my "index.html" template for p5.js!
    The less to type in and memorize, the quicker and happier the result! :-bd

    <meta charset=utf8>
    <script src=http://p5js.org/js/p5.min.js></script>
    
    <script>
    
    // p5.js sketch goes here...
    
    </script>
    
    
  • edited October 2015

    Let's say you've got the p5.js script in a separate ".js" file. For example "script.js".
    And also the "p5.js" lib file is inside subfolder "libraries/".
    Then the previous template would be like this now:

    <meta charset=utf8>
    <script src=script.js></script>
    <script src=libraries/p5.js></script>
    

    See? "index.html" is only 3 statements now! Much shorter & quicker too! *-:)

  • Thanks @Blindfish! I appreciate you point those things out. I missed that. Same to you, @GoToLoop for the brevity. Thanks all!

Sign In or Register to comment.