Using Custom Fonts with next.js

Hi everybody,

I updated the app host in my project and I can see my code components in plasmic studio.However, importing the custom font does not work.

I believe that the documentation is incomplete or I am missing something.

Into global.css I added my font face:

@font-face {
  font-family: 'Medium';
  src: url('/fonts/ABCDiatype-Medium.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;

@font-face {
  font-family: 'Mono Medium';
  src: url('/fonts/ABCDiatypeMono-Medium.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;

and in pages/_app.tsx I also import gloabl.css

import 'styles/globals.css'
import { PlasmicRootProvider } from "@plasmicapp/react-web";
import type { AppProps } from "next/app";
import Head from "next/head";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <PlasmicRootProvider Head={Head}>
      <Component {...pageProps} />

Then i deployed and reloded plasmic studio. Next I added the font family name into the custom font sidebar:

and then I selected the font for my texts.

However, plasmic only falls back to some other font and I can not see my specified font.

Do I need to add something else in the global css or anywhere else in the next.js.


Hi! Ignoring Plasmic, does that work with normal code? Is the font URL downloadable?

Hi, yes it does. Now I was able to get it to work with next/font/local. But for just next.js I was not able to get it to work.

So I guess my problem is solved. It is strange that with just next.js it did not work and I do not know why. Maybe something is missing or I mixed something up.