How to store a web font into variable? How to reference to the web font imported as css @font-face?

p5.js Coding Questions
1

Hello,
for some reason I want to import a font from Google Fonts as webfont to avoid using loadFont();

I insert the font link into index.html and in my style.css :
@font-face {font-family : "myFont" }

In sketch.js, I go with :
textFont('myFont'); text('hello', width/2, height/2);

It works.

I’d like to use the function refToMyFont.textToPixels(), but unlike the fact that we can store loadFont() in a variable, as my font’s imported as css, I don’t know how to reference to it in sketch.js.
I appreciate your helps, thanks !

2

textToPixels() is a method from class p5.Font.
So we need loadFont() in order to get a p5.Font.
For that we need to find out the actual URL for a font’s file.

1 Like
3

so i should’ve used the localfont anyway … :smiling_face_with_tear:
Thanks for the answer. :blush: