How to add custom fonts in T3 app
is there a definitive way of doing this I've tried many ways but none of them work.
I want to use poppins font from google fonts
16 Replies
I like the new @next/font thing
Adds fonts easily
is it in next 13 or can i use it in my app
Go look it up
It’s it’s own package
ah okay
its in next13 ill have to setup layout.tsx
is there any other way?
No you don’t
I literally just did it myself, imported the font and used it
GitHub
GitHub - barrybtw/next13-hero
Contribute to barrybtw/next13-hero development by creating an account on GitHub.
next/font is cool
if you're still on next 12, fontsource is fine
Why would it not work in v12 though
never mind i thought it was a new thing
anyway managing and loading fonts has historically been kind of a pain if you want it to be great, and next/font seems like the best solution
imo you should still spend some time learning about how webfonts work and the different things that can happen depending on the user's browser settings
thanks for reference
in the documentation there was layout.tsx so i thought i have to make it
I recommend you to self host your fonts with linked stylesheets. Online you can find some code gen tools so you simply have to download and extract a zip to your public directory in next and import the css file in it
do i have to add _documents.tsx to use the fonts?
Just try 🤷
Check docs for next font
was going through your project really cool
https://google-webfonts-helper.herokuapp.com/fonts/jost?subsets=latin here is the tool i referred to
google webfonts helper
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!