Geist fonts don't work on `pages` router, only on `app` router

[aryanprince]

Font Name (Geist Sans/Geist Mono):

• [x] Geist Sans
• [x] Geist Mono

Description of the Issue:

Geist fonts work only on app router but not on pages router. Both Geist Sans and Mono show the following error on pages router:

"SyntaxError: Cannot use import statement outside a module"

Steps to Reproduce:

1. Create a new Next.js 14 app with pages router
2. npm i geist@latest and import the font in _app.tsx as docs mention
3. That's it, you see the error immediately

Pages Router (errors):

App Router (works fine):

Expected Behavior:

Geist font should work, as expected, like it does with app router.

Screenshots:

Environment:

• OS: MacOS
• Software: Using NodeJS runtime and npm as package manager
• Version of the Font: 1.1.0 (latest at time of writing)

Additional Context:

15+ people from issue #13 faced the same issue mentioned here. But the issue was closed due to a temporary workaround found where adding transpilePackages: ["geist"] in next.config.js fixed the issue. But this fix wasn't documented or mentioned anywhere in docs - nor is it an actual fix for the issue.

StackBlitz links use Next.js 13.5.1, but the issue is the same and persists.

[mwskwong]

15+ people from issue https://github.com/vercel/geist-font/issues/13 faced the same issue mentioned here. But the issue was closed due to a temporary workaround found where adding transpilePackages: ["geist"] in next.config.js fixed the issue. But this fix wasn't documented or mentioned anywhere in docs - nor is it an actual fix for the issue.

To add on to this, this is also a valid workaround when trying to import Geist in client components while using Next.js App Router.

I understand this seems to be more relevant tolocalFont itself instead of Geist, but IMO it should be mentioned in the readme.

[sandeshbagade]

I also had same #13 issue. transpilePackages: ["geist"] in next.config.js worked for me. I wasted half a day playing around with webpack config as I was getting TypeError: next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

I feel this should become the part of official documentation untill gets fixed in next version.

[wayneschuller]

I tripped over this problem as well - on pages router 14.0.4

[GorvGoyl]

how ironic that the font developed by vercel is not even fully supported in their own framework. switching back to inter for peace.

[sandeshbagade]

I wish I could just switch back to inter for peace but PM in my team want Geist :(

[fers4t]

same here with all versions of next.js in pages route.

[derfcode]

Thanks for the temp solution, but yea I hope this gets fully solved.

[stabildev]

Still an issue in Nextjs 14.2.3 with pages router

[j-fdion]

Use @sandeshbagade solution.

It worked for me :), thank you very much!

[JohnPhamous]

Setting transpilePackages is the workaround we recommend https://github.com/vercel/geist-font/issues/59#issuecomment-1854522683. Moving forward we will

1. Make a change in Next.js to support geist automatically in the Pages router
2. Update the documentation to show how to use transpilePackages for unsupported versions of Next.js

114 is a WIP.