Jdodd Comments - Answer Overflow

Jdodd

•Created by Temp Change on 11/16/2023 in #questions

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

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

6 replies

•Created by Temp Change on 11/16/2023 in #questions

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

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!

6 replies