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

**URL:** <https://discourse.processing.org/t/how-to-store-a-web-font-into-variable-how-to-reference-to-the-web-font-imported-as-css-font-face/42444>\
**Category:** Coding Questions\
**Created:** [July 18, 2023, 2:58pm UTC](https://discourse.processing.org/t/how-to-store-a-web-font-into-variable-how-to-reference-to-the-web-font-imported-as-css-font-face/42444 "2023-07-18T14:58:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [July 18, 2023, 2:58pm UTC](https://discourse.processing.org/t/how-to-store-a-web-font-into-variable-how-to-reference-to-the-web-font-imported-as-css-font-face/42444/1 "2023-07-18T14:58:52Z")

</div>

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 !

---

<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:** [July 18, 2023, 3:34pm UTC](https://discourse.processing.org/t/how-to-store-a-web-font-into-variable-how-to-reference-to-the-web-font-imported-as-css-font-face/42444/2 "2023-07-18T15:34:53Z")

</div>

[**textToPixels()**](https://p5js.org/reference/#/p5.Font/textToPoints) is a method from class [p5.Font](https://p5js.org/reference/#/p5.Font).  
So we need [**loadFont()**](https://p5js.org/reference/#/p5/loadFont) in order to get a [p5.Font](https://p5js.org/reference/#/p5.Font).  
For that we need to find out the actual URL for a font’s file.

---

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [July 18, 2023, 4:39pm UTC](https://discourse.processing.org/t/how-to-store-a-web-font-into-variable-how-to-reference-to-the-web-font-imported-as-css-font-face/42444/3 "2023-07-18T16:39:41Z")

</div>

> [@WaningJupiter](#):
>
> `@font-face {font-family : "myFont" }`

so i should’ve used the localfont anyway … 🥲  
Thanks for the answer. 😊