Using Custom Fonts with next.js

[vinzenz_trimborn]

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} />
    </PlasmicRootProvider>
  );
}

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.

Thanks
Vinzenz

[yang]

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

[vinzenz_trimborn]

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.