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 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;
}

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

Give feedback on this page