How to use Geist font on Nextra docs?

Answered

Sporting Lucas Terrier posted this in #help-forum

Sporting Lucas TerrierOP

2024-05-25T05:23:48.739Z

I want to use [Geist](https://vercel.com/font#get) font on [nextra docs](https://nextra.site/docs)

I read the geist docs from [here](https://www.npmjs.com/package/geist?activeTab=readme) but it didn't help me!

I first tried to import this on the app/layout.js file but it didn't work, then I imported it on the pages/_app.js but it threw the error SyntaxError: Cannot use import statement outside a modulee

Answered by joulev

this is a bug of localFont in nextjs. check this thread for workarounds: https://github.com/vercel/geist-font/issues/59

View full answer

6 Replies

@Sporting Lucas Terrier I want to use [Geist](https://vercel.com/font#get) font on [nextra docs](https://nextra.site/docs) I read the geist docs from [here](https://www.npmjs.com/package/geist?activeTab=readme) but it didn't help me! I first tried to import this on the app/layout.js file but it didn't work, then I imported it on the pages/_app.js but it threw the error `SyntaxError: Cannot use import statement outside a module`e

joulev

2024-05-25T06:24:37.954Z

this is a bug of localFont in nextjs. check this thread for workarounds: https://github.com/vercel/geist-font/issues/59

Answer

joulev

2024-05-25T06:25:00.902Z

use it in pages/_app.tsx. nextra doesnt use the app router so you dont need to use app/layout.tsx

@joulev this is a bug of `localFont` in nextjs. check this thread for workarounds: https://github.com/vercel/geist-font/issues/59

Sporting Lucas TerrierOP

2024-05-25T06:34:20.588Z

still getting the same error: SyntaxError: Cannot use import statement outside a module

_app.jsx:

import 'components/style.css'

import { GeistSans } from "geist/font/sans";

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

@Sporting Lucas Terrier still getting the same error: `SyntaxError: Cannot use import statement outside a module` _app.jsx: `import 'components/style.css' import { GeistSans } from "geist/font/sans"; export default function MyApp({ Component, pageProps }) { return ( <main className={GeistSans.className}> <Component {...pageProps} /> </main> ) }`

joulev

2024-05-25T06:43:49.803Z

did you add transpilePackages: ["geist"] to next.config.js? what does your config file look like now?

@joulev did you add transpilePackages: ["geist"] to next.config.js? what does your config file look like now?

Sporting Lucas TerrierOP

2024-05-25T06:57:22.701Z

thanks it worked

🙃