Theo's Typesafe Cult•14mo ago

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•14mo 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 ChangeOP•14mo ago

ah thx

Matvey•14mo 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

Gaming

Programming

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