-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Open
Labels
Area:PreviewFor features and bugs relating to the embedded preview sketchFor features and bugs relating to the embedded preview sketchBugError or unexpected behaviorsError or unexpected behaviors
Description
p5.js version
1.9.0
What is your operating system?
Mac OS
Web browser and version
Chrome 120, Firefox 120, Safari 17.2
Actual Behavior
When I load a font with loadFont()
, I can't use it to style HTML elements.
Expected Behavior
I should be able to set the font-family
for HTML elements as shown in the last example.
Steps to reproduce
Here's a sketch that demonstrates the bug.
@raclim @lindapaiste @dhowe @paulaxisabel @SarveshLimaye @SkylerW99 @BamaCharanChhandogi @Obi-Engine10 @hannahvy @singshris @hiddenenigma I'm happy to help with this where I can!
let font;
// Load the font.
function preload() {
font = loadFont("assets/PressStart2P-Regular.ttf");
}
function setup() {
createCanvas(400, 400);
// Paint the background.
background(0);
// Use the font in the canvas.
fill(255);
textAlign(CENTER);
textFont(font, 22);
text("Are you in?", width / 2, height / 2);
// Create a <button> element.
let button = createButton("Yes");
button.size(100);
button.position(width / 2 - 50, height / 2 + 30);
// Style the button.
button.style("background-color", "black");
button.style("color", "white");
button.style("border-radius", "10px");
button.style("padding", "5px");
// Try to set the button's font-family.
// This works locally.
button.style("font-family", "PressStart2P-Regular");
// The code below makes the font-family work
// in the p5.js Web Editor.
// let f = new FontFace(
// "PressStart2P-Regular",
// "url(assets/PressStart2P-Regular.ttf)"
// );
// document.fonts.add(f);
}
Metadata
Metadata
Assignees
Labels
Area:PreviewFor features and bugs relating to the embedded preview sketchFor features and bugs relating to the embedded preview sketchBugError or unexpected behaviorsError or unexpected behaviors