# Using textToPoints() with an already loaded font

**URL:** <https://discourse.processing.org/t/using-texttopoints-with-an-already-loaded-font/16651>\
**Category:** Coding Questions\
**Created:** [December 27, 2019, 7:46am UTC](https://discourse.processing.org/t/using-texttopoints-with-an-already-loaded-font/16651 "2019-12-27T07:46:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Seyka](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@Seyka](https://discourse.processing.org/u/Seyka)\
**Post date:** [December 27, 2019, 7:46am UTC](https://discourse.processing.org/t/using-texttopoints-with-an-already-loaded-font/16651/1 "2019-12-27T07:46:59Z")

</div>

Hi, I am using the [textToPoints()](https://p5js.org/reference/#/p5.Font/textToPoints) function in a project, but since [textToPoints()](https://p5js.org/reference/#/p5.Font/textToPoints) is part of the prototype of [p5.Font](https://p5js.org/reference/#/p5.Font) I need to use it with a font loaded with [loadFont()](https://p5js.org/reference/#/p5/loadFont).  
But I can’t find a way to get a reference to an already loaded font (default or loaded in the html file) to use [textToPoints()](https://p5js.org/reference/#/p5.Font/textToPoints).  
The goal would be to load the font only once in the html file (for displaying the website) then get a reference to it in the p5 script (if that makes sense, I am still new to html/js).  
Thank you

---

<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:** [December 27, 2019, 12:34pm UTC](https://discourse.processing.org/t/using-texttopoints-with-an-already-loaded-font/16651/2 "2019-12-27T12:34:23Z")

</div>

> [@Seyka](#):
>
> But I can’t find a way to get a reference to an already loaded font (default or loaded in the html file)

Property p5.Font::_font_ is a Font object from library “opentype.js”: [Opentype.js.org](http://Opentype.js.org)

> **[GitHub - opentypejs/opentype.js: Read and write OpenType fonts using JavaScript.](https://github.com/opentypejs/opentype.js#api)**
>
> Read and write OpenType fonts using JavaScript. Contribute to opentypejs/opentype.js development by creating an account on GitHub.

> <https://github.com/processing/p5.js/blob/0.10.2/src/typography/p5.Font.js#L18-L28>

> <https://github.com/processing/p5.js/blob/0.10.2/src/typography/loading_displaying.js#L8-L10>

> <https://github.com/processing/p5.js/blob/0.10.2/package.json#L88-L89>

And it seems like that dependency library can only load a font from a file.  
I don’t think it can use an already loaded font though.  
But you can ask them about it to be sure.

---

<div class="post-metadata">

**Author:** ![Seyka](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@Seyka](https://discourse.processing.org/u/Seyka)\
**Post date:** [December 27, 2019, 1:52pm UTC](https://discourse.processing.org/t/using-texttopoints-with-an-already-loaded-font/16651/3 "2019-12-27T13:52:30Z")

</div>

Thank you for your reply !  
The reason I did not want to load the font in the p5 sketch was to avoid the “Loading…” message on a white background when loading the font in [preload()](https://p5js.org/reference/#/p5/preload).  
Since this is just for a tiny personal project (and I do not have much experience with p5 and javasript in general) this is probably not worth for me to dig deeper, but thank you for pointing me to opentype.js.  
To work around this I changed the background in the html file to match the sketch so that the transition is smoother when loading.

---

<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:** [December 27, 2019, 2:17pm UTC](https://discourse.processing.org/t/using-texttopoints-with-an-already-loaded-font/16651/4 "2019-12-27T14:17:02Z")

</div>

> [@Seyka](#):
>
> … was to avoid the “Loading…” message on a white background when loading the font in [preload()](https://p5js.org/reference/#/p5/preload).

- [p5.js overview · processing/p5.js Wiki · GitHub](http://GitHub.com/processing/p5.js/wiki/p5.js-overview#loading-screen)
- [loadingMultiplesSounds - Processing 2.x and 3.x Forum](http://Forum.Processing.org/two/discussion/27869/loadingmultiplessounds#Item_2)