Cannot figure out how to use custom fonts

Developer Support
1

I can not find the solution to use custom fonts:
what I did:
• we have a plasmic project with loader
• I read https://docs.plasmic.app/learn/custom-fonts/
• added the fonts to the public directory
• added font faces to the global.css and double checked the urls
• hosted the site on vercel
• set the site/plasmic-host in the config
the issue is, that the font does not show up under the custom font in the editor or on the site (we tried to add the font with the new font button)…
what am I missing?

2

Oh there is one more step:

Once you reload Plasmic Studio with app-hosting, you can add the same font-family name in the Custom Fonts left tab, and you’ll start to be able to use it. (As long as it displays fine in the editor, it works—you may see a warning for now about the font not being available, which you can ignore.)

3

Are you able to add the font there and does that work

4

@yang is it ok if I PM you

5

Sure thing

6

I managed to fix it…
global.css is not imported by default by the app, so I had to create a _app.tsx under the pages directory and import it.

// /pages/_app.tsx
import '../styles/globals.css'

export default function MyApp({ Component, pageProps }: any) {
    return <Component {...pageProps} />
}
1 Like