Twin.macro: How to add custom fonts using twin.macro?
I want to replace the default "serif" and "sans" fonts in Tailwindcss with another font. How can go about doing that? I'm using Next.js if it helps.
More specifically, where do I save the downloaded font and configure twin to use it?
theairbend3r
All 3 comments
@theairbend3r please see Tailwind's official documentation on customizing fonts
rbutera
on 3 Jul 2020
@rbutera Hey, could you give further explanations on how to do this? I'm using twin.macro with nextjs and styled components. Do I need to change something inside next.config.js? I added the font inside public/fonts but can't get this to work. Already read the Tailwind documentation...
rodolphoasb
on 1 Aug 2020
👍2
I've used the next-fonts package to load fonts, perhaps take a look at that.
ben-rogerson
on 2 Aug 2020
🚀1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
owaiswiz
路
4Comments
clement-buchart
路
5Comments
vincent-vieira
路
7Comments
JoseRFelix
路
4Comments
kieran-osgood
路
5Comments
Most helpful comment
@rbutera Hey, could you give further explanations on how to do this? I'm using twin.macro with nextjs and styled components. Do I need to change something inside next.config.js? I added the font inside public/fonts but can't get this to work. Already read the Tailwind documentation...