How to use Google fonts in P5JS online editor

p5.js Coding Questions
1

Hi,

I have encountered this short video which explains how to manipulate the “index.html” and “style.css” in order to be load use Google fonts.

Hope that helps
Shlomi

2 Likes
2

add a example could also help:
https://editor.p5js.org/kll/sketches/H1RjsrxZ4

2 Likes
3

I have a problem with this as it doesn’t use the font on the first run.
Is there a way to preload a font that is loaded in the html header?

https://editor.p5js.org/hellonearthisman/sketches/_ppZCqMoS
Screenshot_9
2nd time it’s run is uses the font.
Screenshot_8

BTW that video is pretty incomplete.

4

Following the tips from the article below: :wink:

You can add this <link> tag to your “index.html” file in order to explicitly preload a specific font file: :blush:

<link
  href="https://Fonts.GStatic.com/s/baloo/v4/6xKhdSpJJ92I9MWPCm4.woff2"
  rel="preload" as="font" crossorigin
>

BtW, the “.woff2” file link above corresponds to the /* latin */ @font-face { from: :face_with_monocle:
Fonts.GoogleAPIs.com/css?family=Baloo

P.S.: It seems to utterly fail on Firefox unfortunately! :fox_face:

5

Thanks, adding this to the index.html

<link 
href="https://fonts.gstatic.com/s/baloo/v4/6xKhdSpJJ92I9MWPCm4.woff2" 
rel="preload" as="font" crossorigin
>

And this to the CSS files worked great.

@font-face {
  font-family: 'Baloo';
  font-style: normal;
  font-weight: 400;
  src: local('Baloo Regular'), local('Baloo-Regular'), url(https://fonts.gstatic.com/s/baloo/v4/6xKhdSpJJ92I9MWPCm4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
6

Notice that your current shortened posted CSS is already present within: :nerd_face:
Fonts.GoogleAPIs.com/css?family=Baloo.

Which in turn, was already being loaded by your previous “index.html” file: :money_mouth_face:

<link href="https://Fonts.GoogleAPIs.com/css?family=Baloo" rel="stylesheet">
7

Yes, I see. So i could add either the font face element into the css file or include the link style sheet above. Thanks.

Works well but how can I now future proof it as google changes these url’s baloo/v4/6xKhdSpJJ92I9MWPCm4.woff2 when the fonts updated.

<link rel="preload" href="https://Fonts.GoogleAPIs.com/css?family=Baloo" as="style">
<link rel="stylesheet" href="https://Fonts.GoogleAPIs.com/css?family=Baloo">

or

<link rel="preload" href="https://Fonts.GoogleAPIs.com/css?family=Baloo" as="font" crossorigin>
<link rel="stylesheet" href="https://Fonts.GoogleAPIs.com/css?family=Baloo">

Doesn’t seem to work.

8

We can always download those font links, like those “.woff2” files, and place them locally together w/ our “.html” file. :smiling_imp:

Now, rather than loading them from their original remote URL, we grab them locally: :bulb:

<link href="6xKhdSpJJ92I9MWPCm4.woff2" rel="preload" as="font" crossorigin>

Notice though that Fonts.GoogleAPIs.com/css?family=Baloo link actually gets a “.css” file. :link:

So we can’t use the attribute as="font" on such a link! :grimacing:

Also, “.css” files don’t preload their font links right way. :roll_eyes:

Only after their actually requested for the 1st time. :woozy_face:

Therefore, using <link rel="preload" as="style"> on them is merely a tiny loading performance gain. :flushed:

But got nothing to do in actually caching their fonts! :cry:

1 Like
9

I guess it would be messy to write some code that extracts the url for the woff2 font from the Fonts.GoogleAPIs.com/css?family=Baloo css file and then use that as a preload and it would have to run before the preload.

So yes, if I need the sketch to function well forever I should download the font and load it into the web editors files.

10

As I had warned before, I couldn’t make the Firefox-based browsers to work w/: :fox_face:
<link rel="preload" as="font" crossorigin href="">.

Therefore, if we have the font file (be it a local or a remote URL link) itself, I think we’re better off using p5js’ loadFont() inside preload() instead: :thinking:

  1. p5js.org/reference/#/p5/loadFont
  2. p5js.org/reference/#/p5/preload

So those fonts are ready to use right way across all browser types. :sailboat:

P.S.: Not sure whether loadFont() is compatible w/ “.woff2” font files though. :confounded:

Its reference doesn’t mention that font extension at all! :cold_sweat:

Although I’ve spotted the “.woff2” extension somewhere within p5js’ source code: :see_no_evil:

So there’s real hope it should work: :upside_down_face:

2 Likes