Trying to add CSS for custom fonts

Developer Support
1

Hey! I am trying to add some custom fonts (https://docs.plasmic.app/learn/custom-fonts/#:~:text=To%20use%20custom%20fonts%20in,the%20fonts%20to%20your%20codebase.&text=Once%20you%20reload%20Plasmic%20Studio,be%20able%20to%20use%20it.), and I don’t seem to be able to get it working. :disappointed:

I currently have something like this (since the fonts are installed in my PC), and I have created a fonts directory in my GitHub repo. Added the following lines to global.css:
@font-face {
font-family: ‘FOT-Rodin Pro’;
src: url(‘./fonts/FOTRodin-Pro-DB.otf’) format(‘otf’), url(‘./fonts/FOTRodin-Pro-EB.otf’) format(‘otf’), url(‘./fonts/FOTRodin-Pro-L.otf’) format(‘otf’), url(‘./fonts/FOTRodin-Pro-M.otf’) format(‘otf’), url(‘./fonts/FOTRodin-Pro-UB.otf’) format(‘otf’);
font-weight: 900;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: ‘Quadrat-Serial’;
src: url(‘./fonts/Fquadrat-serial-bold.ttf’) format(‘ttf’), url(‘./fonts/quadrat-serial-bolditalic.ttf’) format(‘ttf’), url(‘./fonts/quadrat-serial-regular.ttf’) format(‘ttf’), url(‘./fonts/quadrat-serial-regularitalic.ttf’) format(‘ttf’);
font-weight: 900;
font-style: normal;
font-display: swap;
}

but still doesn’t work. Can someone help me?

image.png
image.png1066×179 66.3 KB

2

I could be wrong but try removing the period. change from “./fonts” to “/fonts”

3

I tried removing the dot and also changing from ttf to woff (converting the fonts) and I still don’t seem to get them to work :confused:

4

Found this forum post: https://forum.plasmic.app/t/cannot-figure-out-how-to-use-custom-fonts/1566/3

and it said "global.css is not imported by default by the app, so I had to create a _app.tsx"

I created an _app.tsx and it works. The docs say that global.css should be imported by default but I don’t think that is correct.

5

Good catch! We should make a note of that in the docs…