Adding custom fonts

Currently, you can use the Custom Fonts tab in the left sidebar to register fonts that are available on your computer.

However, these fonts will only be on your computer, so others accessing the site will not be able to see them! This is only appropriate for quick design work.

To use custom fonts in production, you will need to set up app-hosting, and add the fonts to your codebase.

For instance, if you have a Next.js app, you would add the fonts to your global styles CSS (by default they provide a styles/globals.css which is imported into _app.tsx so that the font is available throughout the app).

NOTE: Make sure there exists an _app.tsx that is importing globals.css! (It may not be in your project.)

styles/globals.css
Copy
@font-face {
font-family: 'Really Sans Large';
src: url('/fonts/ReallySansLarge-Black.woff2') format('woff2'), url('/fonts/ReallySansLarge-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
pages/_app.tsx
Copy
import '../styles/globals.css';
import type { AppProps } from 'next/app';
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}

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

Was this page helpful?

Give feedback on this page