Can't load external CSS via Javascript

Photoshop UXP Plugin API
1

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

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

The CSS file contains this:

@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!

2

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

3

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

4

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

5

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
image1482×108 11 KB

This is how it looks when I replace it:

image
image1264×720 199 KB

And this doesn’t work either.

Any ideas?

6

@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.

7

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

2 Likes
8

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

9

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.

1 Like
10

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

1 Like