# How to use Google fonts in P5JS online editor

**URL:** <https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893>\
**Category:** Coding Questions\
**Created:** [December 25, 2018, 7:16pm UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893 "2018-12-25T19:16:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![shlomyli](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@shlomyli](https://discourse.processing.org/u/shlomyli)\
**Post date:** [December 25, 2018, 7:16pm UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/1 "2018-12-25T19:16:39Z")

</div>

Hi,

I have encountered this short [video](https://youtu.be/3BanVQvCN6U) which explains how to manipulate the “index.html” and “style.css” in order to be load use Google fonts.

Hope that helps  
Shlomi

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 26, 2018, 1:05am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/2 "2018-12-26T01:05:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [January 25, 2019, 4:33am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/3 "2019-01-25T04:33:45Z")

</div>

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](https://editor.p5js.org/hellonearthisman/sketches/_ppZCqMoS)  
 ![Screenshot_9](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/659a12fb317dd12abfae32ada997c1454f40ef1a.png)  
2nd time it’s run is uses the font.  
 ![Screenshot_8](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a7f268f5405a22946cdf97814cd156770626aeb9.png)

BTW that video is pretty incomplete.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 25, 2019, 4:32pm UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/4 "2019-01-25T16:32:00Z")

</div>

> [@hellonearthis](#):
>
> Is there a way to preload a font that is loaded in the html header?

Following the tips from the article below: 😉

> **[How to preload Google Fonts using resource hints - Chris Ashton - Senior...](https://ashton.codes/preload-google-fonts-using-resource-hints/)**
>
> TLDR: you shouldn't. But you can. Here's how.

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

```html
<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: 🧐  
[Fonts.GoogleAPIs.com/css?family=Baloo](http://Fonts.GoogleAPIs.com/css?family=Baloo)

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

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [January 26, 2019, 3:59am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/5 "2019-01-26T03:59:55Z")

</div>

Thanks, adding this to the index.html

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

```

And this to the CSS files worked great.

```auto
@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;
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 26, 2019, 4:12am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/6 "2019-01-26T04:12:03Z")

</div>

> [@hellonearthis](#):
>
> And this to the CSS files worked great.

Notice that your current shortened posted CSS is already present within: 🤓  
[Fonts.GoogleAPIs.com/css?family=Baloo](http://Fonts.GoogleAPIs.com/css?family=Baloo).

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

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

```

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [January 26, 2019, 4:37am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/7 "2019-01-26T04:37:43Z")

</div>

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.

```auto
<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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 26, 2019, 4:57am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/8 "2019-01-26T04:57:21Z")

</div>

> [@hellonearthis](#):
>
> … but how can I now future proof it as Google changes these URLs…

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

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

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

```

Notice though that [Fonts.GoogleAPIs.com/css?family=Baloo](http://Fonts.GoogleAPIs.com/css?family=Baloo) link actually gets a “.css” file. 🔗

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

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

Only after their actually requested for the 1st time. 🥴

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

But got nothing to do in actually caching their fonts! 😢

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [January 26, 2019, 5:25am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/9 "2019-01-26T05:25:53Z")

</div>

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](http://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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 26, 2019, 5:33am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893/10 "2019-01-26T05:33:20Z")

</div>

As I had warned before, I couldn’t make the Firefox-based browsers to work w/: 🦊  
`<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: 🤔

1. [p5js.org/reference/#/p5/loadFont](http://p5js.org/reference/#/p5/loadFont)
2. [p5js.org/reference/#/p5/preload](http://p5js.org/reference/#/p5/preload)

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

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

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

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

> <https://github.com/processing/p5.js/blob/0.7.3/src/typography/loading_displaying.js#L111>

So there’s real hope it should work: 🙃