Using custom fonts from a delivery service (Font Library)

Plasmic Studio Questions
1

Hi everyone!
I am trying to add a custom font from Font Library, following the official guide. Let’s make the example really concise:
Imagine I want to use the font called Oddballz. And I DO NOT HAVE IT installed on my computer. Is it still possible to use it just linking it? Because that is exactly what I understand following the guide.
I just add this code to the CustomCSS extension:
@import url('https://fontlibrary.org//face/oddballz');
And then add the font to Plasmic Studio
image
with the provided name from Font Library
image
This is not working, I cannot see the font being applied in my Plasmic Studio project.
Am I missing anything?
Thanks!!

2

Hi, it seems there is an issue with fontlibrary.org if you check https://fontlibrary.org/en/face/oddballz and https://fontlibrary.org//face/code-new-roman you see the difference between a working font and one not being served.

3

Hi @fmota, thank you for your answer. Before trying that font, I had already tried several ones:
UNIQUE and Jellee, for example.
In both cases, I’ve tried with two links:

https://fontlibrary.org//face/jellee-typeface

https://fontlibrary.org/en/face/jellee-typeface

And custom font name in Plasmic as “JelleeRoman” or “JelleBold”. No success.
BTW, I don’t know if this makes a difference, but I have custom code in my project and it is hosted locally.
Thanks,

4

The Jellee font works here, could you check again ?

image
image572×570 26.1 KB

5

Sure. Could you please show me your EmbedCSS code?

6

Here it is

EmbedCSS
EmbedCSS1019×616 17.3 KB

/* CSS snippet */

@import url('https://fontlibrary.org//face/oddballz');

@import url('https://fontlibrary.org/en/face/jellee-typeface');
7

Thanks a lot, @fmota. Everything is working as expected. It was my fault, @import statements MUST BE DECLARED at the beginning of the file… I know, basic CSS :man_facepalming:
Thanks,

1 Like