# Can't load external CSS via Javascript

**URL:** <https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343>\
**Category:** UXP Plugin API\
**Tags:** javascript\
**Created:** [May 29, 2023, 7:34pm UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343 "2023-05-29T19:34:22Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [May 29, 2023, 7:34pm UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/1 "2023-05-29T19:34:22Z")

</div>

I’m trying to load a CSS file through javascript with this code:

```auto
const linkCSS = document.createElement('link');
linkCSS.href = "./css/style.css";
linkCSS.rel = "stylesheet";
document.head.appendChild(linkCSS);

```

The CSS file contains this:

```auto
@font-face {
    font-family: BankGothic Md Bt;
    src: url(../assets/typo/BankGothic.ttf);
}

@font-face {
    font-family: Gotham;
    src: url(../assets/typo/Gotham.ttf);
}

```

I want to load my custom fonts to the plugin. I don’t have a HTML index file, is it possible to do it only with JavaScript?

Thanks!

---

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [May 29, 2023, 7:41pm UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/2 "2023-05-29T19:41:37Z")

</div>

Seems it does load CSS successfully but the font loading doesn’t work, anyone know why it could be?

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [May 29, 2023, 9:38pm UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/3 "2023-05-29T21:38:32Z")

</div>

Can you encode font as base64? Will it change anything? Can you also try Woff and Woff2? TTF is kind of non-optimal these days in browsers. In Internet Explorer EOT was a way to go and last one to try is the OTF. But maybe it is just not supported at all

---

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [May 30, 2023, 2:36am UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/4 "2023-05-30T02:36:09Z")

</div>

I just converted the .TTF and already tried now with **.woff** , **.woff2** and **.eot** and none of them works either.

---

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [May 30, 2023, 3:24am UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/5 "2023-05-30T03:24:04Z")

</div>

I’m trying to load the font url as BASE64 but somehow when I replace the `<<BASE64>>` with the base64 font characters it all goes white.

This is the font-face code and I replace the `<<BASE64>>` with the base64 characters.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/3/336ed12690490cdd7301f2e7d065bbcb5265a154.png)

This is how it looks when I replace it:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/8/8c36330485380f4491eadcec50e80cb3c7a8e905.png)

And this doesn’t work either.

Any ideas?

---

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [May 30, 2023, 5:17pm UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/6 "2023-05-30T17:17:54Z")

</div>

@kerrishotts Do you have any suggestions for this issue?

My blan B is to use .svg for my fonts but is not the most optimal option for this.

---

<div class="post-metadata">

**Author:** ![indranil](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/indranil/32/2584_2.png) [@indranil](https://forums.creativeclouddeveloper.com/u/indranil)\
**Post date:** [June 2, 2023, 6:02am UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/7 "2023-06-02T06:02:17Z")

</div>

UXP doesn’t support `font-face` yet which is why the fonts don’t get loaded.

---

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [June 3, 2023, 7:12pm UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/8 "2023-06-03T19:12:32Z")

</div>

Thanks for letting us know this Indranil. Is it planned to be an added feature at some point or this won’t ever happen?

---

<div class="post-metadata">

**Author:** ![indranil](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/indranil/32/2584_2.png) [@indranil](https://forums.creativeclouddeveloper.com/u/indranil)\
**Post date:** [June 5, 2023, 8:18am UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/9 "2023-06-05T08:18:26Z")

</div>

Though `font-face` isn’t prioritized in the upcoming releases for now but this is something that’s in the feature list of the UXP team and isn’t something that’s in the _won’t ever happen_ bucket.

---

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [June 5, 2023, 4:48pm UTC](https://forums.creativeclouddeveloper.com/t/cant-load-external-css-via-javascript/6343/10 "2023-06-05T16:48:25Z")

</div>

Thank you Indranil, meanwhile I used .svg fonts and works great by now!