Next.js Discord

Discord Forum

Failed to download `Poppins` from Google Fonts. Using fallback font instead.

Answered
English Lop posted this in #help-forum
Open in Discord
English LopOP
- error Failed to download `Poppins` from Google Fonts. Using fallback font instead.


I get this error when I try to use a font from next/font/google. However I import this in the global layout.tsx and it works but now when creating a Header component, the font doesn't apply and when I try to manually import the font again in the Header.tsx component I get this error.
Answered by English Lop
Update:

I deleted the .next folder and re-ran the development and now it works. Weird..
View full answer

2 Replies

English LopOP
Update:

I deleted the .next folder and re-ran the development and now it works. Weird..
Answer
Dayo
in case the error comes up again like it did in my case, you can move the font import to a separate file and then import like so

/font.ts
import {Manrope} from 'next/font/google';

export const manrope = Manrope({
  variable: '--font-manrope',
  subsets: ['latin'],
  display: 'swap',
});

/layout.tsx
import {manrope} from '@/assets/fonts';


haven't encountered the issue since then