Font issue @next/next/no-page-custom-font
Unanswered
Puli posted this in #help-forum
PuliOP
Hello!
I'm creating a website and I want to use a font from Google Fonts (Ubuntu and Ysabeau SC). I know that there's
This works as intended. I can use
I'm creating a website and I want to use a font from Google Fonts (Ubuntu and Ysabeau SC). I know that there's
@next/fonts/google, but I want to add it to a tailwind theme, and using that package just didn't work for me. I managed to load the font with a link in ./src/app/layout.tsx, so it applies to the whole page, and added this to the tailwind theme://...
fontFamily: {
body: ["'Ubuntu'", 'Curier New', 'Arial', 'sans-serif'],
heading: ["'Ysabeau SC'", 'Arial', 'sans-serif'],
},
//...This works as intended. I can use
font-body and font-heading to apply those exact fonts. However when I made a PR to push from develop to main in my repo (link lower ⬇ï¸), code factor reported an issue with id @next/next/no-page-custom-font. It explained how to fix that (in the attached image), but I think it's a solution made for apps that use the pages directory instead of the app directory, so I'm kinda confused as to what I should do.4 Replies
PuliOP
Don't be confused if there's nothing on
main. I got stuck on the first pr.Btw, sorry if this is some 6D spaghetti code, I'm still learning
@Puli Hello!
I'm creating a website and I want to use a font from Google Fonts (Ubuntu and Ysabeau SC). I know that there's `@next/fonts/google`, but I want to add it to a tailwind theme, and using that package just didn't work for me. I managed to load the font with a link in ./src/app/layout.tsx, so it applies to the whole page, and added this to the tailwind theme:
json
//...
fontFamily: {
body: ["'Ubuntu'", 'Curier New', 'Arial', 'sans-serif'],
heading: ["'Ysabeau SC'", 'Arial', 'sans-serif'],
},
//...
This works as intended. I can use `font-body` and `font-heading` to apply those exact fonts. However when I made a PR to push from `develop` to `main` in my repo ||(link lower ⬇ï¸)||, code factor reported an issue with id `@next/next/no-page-custom-font`. It explained how to fix that (in the attached image), but I think it's a solution made for apps that use the `pages` directory instead of the `app` directory, so I'm kinda confused as to what I should do.
Is that an eslint warning? If you want to silence it you can simply disable that warning for that line, though you should still use next/font instead, see the next/font tailwind guide: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css