New and totally stuck on including sketch with WEBGL font into an HTML page

I’m so stuck. I have been using the p5.js editor online and I am loving it. But I want to include the sketch in an html page, eventually making it an animated header. So I’m trying to work it out. I’ve downloaded, and sketches come up if they don’t have the WEBGL fonts in them. If a sketch has a WEBGL parameter in the canvas, then I just get Loading… and that never goes away. I’ve put the .ttf in the same folder as the sketch, and in an assets folder in that folder.

var newFont;
function preload(){
newFont = loadFont ('Play-Bold.ttf');
}

function setup() {
createCanvas(400, 400, WEBGL);
textFont (newFont);
textSize (30);
}
function draw() {
background(0);
text("Play font", 20, 20);
}

And these are lines I put in the head section:

Script src="http ://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js
Script src="http ://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"

And this line goes in the body

Script src="specialFont.js"

Apologies if I posted wrong, or too long. I already had to edit because I see pasting code in tags doesn’t show up. >>red face<<
But I really do hope someone can help me with this! I just don’t get what I am supposed to do with the AJAX or alternatives.

Very many thanks, if you can.
Melissa

1 Like

Ok, fixed. It was straightforward, in fact.
Followed the guidelines on https://github.com/processing/p5.js/wiki/Local-server and tried the brackets solution, couldn’t manage it. Then the sublime text one. This worked. Downloaded Sublime Text 3, and followed this tutorial: https://www.google.com/search?q=cannot+find+browser+sync+in+sublime+text+3&oq=cannot+find+browser+sync+in+&aqs=chrome.1.69i57j33.9280j0j7&sourceid=chrome&ie=UTF-8#kpvalbx=_bAiFXuOQEYLC8gK5roj4CA23
And finally, I can see the sketch, in the web page.
Glad :slight_smile:

1 Like