Next font error - Cannot read properties of undefined (reading 'ascent')
Unanswered
Manx posted this in #help-forum
ManxOP
I am getting errors when running a next js app when run using create-next-app
yarn run v1.22.19
$ next dev
▲ Next.js 14.2.8
- Local: http://localhost:3000
- Environments: .env.local
✓ Starting...
✓ Ready in 6.4s
○ Compiling /_not-found ...
Failed to load font file: C:...\app\fonts\GeistVF.woff
RangeError: Offset is outside the bounds of the DataView
Failed to load font file: C:...\app\fonts\GeistVF.woff
RangeError: Offset is outside the bounds of the DataView
⨯ app\layout.tsx
An error occurred in
TypeError: Cannot read properties of undefined (reading 'ascent')
at get ascent [as ascent] (C:...\node_modules\next\dist\compiled@next\font\dist\fontkit\index.js:1:797933)
Commenting out this segment works:
// const geistMono = localFont({
// src: "./fonts/GeistMonoVF.woff",
// variable: "--font-geist-mono",
// weight: "100 900",
// });
yarn run v1.22.19
$ next dev
▲ Next.js 14.2.8
- Local: http://localhost:3000
- Environments: .env.local
✓ Starting...
✓ Ready in 6.4s
○ Compiling /_not-found ...
Failed to load font file: C:...\app\fonts\GeistVF.woff
RangeError: Offset is outside the bounds of the DataView
Failed to load font file: C:...\app\fonts\GeistVF.woff
RangeError: Offset is outside the bounds of the DataView
⨯ app\layout.tsx
An error occurred in
next/font.TypeError: Cannot read properties of undefined (reading 'ascent')
at get ascent [as ascent] (C:...\node_modules\next\dist\compiled@next\font\dist\fontkit\index.js:1:797933)
Commenting out this segment works:
// const geistMono = localFont({
// src: "./fonts/GeistMonoVF.woff",
// variable: "--font-geist-mono",
// weight: "100 900",
// });
5 Replies
@Manx I am getting errors when running a next js app when run using create-next-app
yarn run v1.22.19
$ next dev
▲ Next.js 14.2.8
- Local: http://localhost:3000
- Environments: .env.local
✓ Starting...
✓ Ready in 6.4s
○ Compiling /_not-found ...
Failed to load font file: C:\...\app\fonts\GeistVF.woff
RangeError: Offset is outside the bounds of the DataView
Failed to load font file: C:\...\app\fonts\GeistVF.woff
RangeError: Offset is outside the bounds of the DataView
⨯ app\layout.tsx
An error occurred in `next/font`.
TypeError: Cannot read properties of undefined (reading 'ascent')
at get ascent [as ascent] (C:\...\node_modules\next\dist\compiled\@next\font\dist\fontkit\index.js:1:797933)
Commenting out this segment works:
// const geistMono = localFont({
// src: "./fonts/GeistMonoVF.woff",
// variable: "--font-geist-mono",
// weight: "100 900",
// });
either the font file is corrupted or next/font is buggy somehow...
but why don't you use
but why don't you use
geist directly? https://www.npmjs.com/package/geistManxOP
This is straight from create-next-app@latest so didn't make additional configurations
then likely a bug...
but if you don't need to use Geist, it's good to remove that part entirely and replace it with your own font
ManxOP
Flagged the post in discord as a bug.. figured out the commenting works as I am creating the post here