# textFont() with font from Typekit / Adobe in React context

**URL:** <https://discourse.processing.org/t/textfont-with-font-from-typekit-adobe-in-react-context/40153>\
**Category:** Libraries\
**Created:** [December 13, 2022, 4:32pm UTC](https://discourse.processing.org/t/textfont-with-font-from-typekit-adobe-in-react-context/40153 "2022-12-13T16:32:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [December 13, 2022, 4:32pm UTC](https://discourse.processing.org/t/textfont-with-font-from-typekit-adobe-in-react-context/40153/1 "2022-12-13T16:32:45Z")

</div>

Hello, I try to use font loaded from TypeKit in a React / Gatsby Context, mut the font don’t load. I don’t find the way to do it.  
I’m sure my font from Adobe is loaded because I it, by the classic way and the font is displaying perfectly.  
I use `gatsby-plugin-web-font-loader` to load my font, the `.env` with the `TYPEKIT_ID` is ok.

but when I pass my font in `textFont()` that’s failed and another replacement font is displayed.

```auto
  function show_label() {
    p5.noStroke();
    p5.fill(0);
    p5.textAlign(p5.CENTER, p5.CENTER);
    // p5.textFont('aglet-mono');
    p5.textFont("Aglet Mono, mono");
    p5.text(p5.data.label, p5.width / 2, p5.height / 2);
  }

```

I try different writing case like “Aglet Mono” or “aglet-mono”, or “aglet mono” … but that’s change nothing.

My configuration is

```auto
"dependencies": {
    "gatsby": "5.2",
    "p5": "^1.5.0",
    "react": "^18.0.0",
}

I try too set the font directly in the CSS component, but that's don't work too.

The only post I found about that it's : 
https://www.geeksforgeeks.org/p5-js-textfont-function/

but it's not really appropriate, because is not on the React context.

So, if anybody have an idea, that's can be make my day !
```

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [December 14, 2022, 9:56am UTC](https://discourse.processing.org/t/textfont-with-font-from-typekit-adobe-in-react-context/40153/2 "2022-12-14T09:56:55Z")

</div>

My problem is solve… I do a classical error : forget to `require("dotenv").config();`at the top of my configutation file `gatsby-config.js`. Sorry for the noise.