Google fonts not working using NextJS!

Developer Support
1

Hi, I’m working on a Plasmic Project using NextJS and SSG. I’m trying to skip the fonts (works fine) and while I’m importing the font using next/fonts/google, for some reason it is not getting applied on the document/components.

Although the import works, I’m able to see the font on the root document, anything particular I might be missing?

import { Montserrat } from 'next/font/google';

const montserrat = Montserrat({
  subsets: ["latin"],
  display: "swap",
})

console.log(montserrat, 'tag montserrat')

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={montserrat.className}>
      <Component {...pageProps} />
    </main>
  );
}

<PlasmicRootProvider
        skipFonts
        loader={PLASMIC}
        prefetchedData={plasmicData}
        prefetchedQueryData={queryCache}
        pageRoute={pageMeta.path}
        pageParams={pageMeta.params}
        pageQuery={router.query}
        // suspenseForQueryData={true}
        //Whilst dev falsify the boundary 
        disableLoadingBoundary={false}
        // globalContextsProps={{
        //   cmsCredentialsProviderProps: { locale: "en" }
        // }}
      >
      <Head>
        {/* <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData, null, 2) }}
        /> */}
      </Head>
          <PlasmicComponent component={pageMeta.displayName} />
      </PlasmicRootProvider>

A little help would be appreciated! :slight_smile:

2

Hey @vansh, welcome to the community!

Are you able to share a publicly accessible version of your site to inspect the HTML/CSS?

3

Hi @jason, thanks for your reply! I was able to load the fonts from local by assigning them into custom css. Thanks a lot!

1 Like