How would I go about adding Inter Font to my tailwind config

For context, I am using an express like backend framework with HTMX and Tailwind, I have never installed a font for a website before, so how would I go about it? Once its installed how would I add it to Tailwind?
3 Replies
Jdodd
Jdodd13mo ago
You can add fonts to tailwind by importing them in your globals.css file, here is an example with the font Crimson Text
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
Then in your tailwind.config.cjs file you will just add the following lines under theme:
theme: {
extend: {
fontFamily: {
body: ["Crimson Text", "sans-serif"]
}
},
},
theme: {
extend: {
fontFamily: {
body: ["Crimson Text", "sans-serif"]
}
},
},
Hope this helps! Forgot to inlcude that you will also need to add this line for any classes you will use it with
@layer base {
body {
@apply font-body
}
}
@layer base {
body {
@apply font-body
}
}
"font-body" tells tailwind to use the font in the tailwind.config.cjs file
Temp Change
Temp ChangeOP13mo ago
ah thx
Matvey
Matvey13mo ago
don't use google fonts, they are terrible for performance. Use fontsource.org. You can install the font locally with npm and serve it from your server a lot more efficiently
Want results from more Discord servers?
Add your server