Skip to content

How to use custom fonts with Tailwind CSS

New Course Coming Soon:

Get Really Good at Git

Assuming you have an app configured to use Tailwind CSS, you’ll have a CSS file that contains

@tailwind base;
@tailwind components;
@tailwind utilities;

Go on Google Fonts for example, select a font, and you’ll be provided a @import for the CSS font.

For example this for the Inter font in various weights:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap');

Add that to the CSS file, and then add this:

@layer base {
  html {
    font-family: Inter, system-ui, sans-serif;
  }
}

In the end, your CSS file will look like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap');

@layer base {
  html {
    font-family: Inter, system-ui, sans-serif;
  }
}

Now your default font is that one, and you can use font-bold for example or font-medium to set various sizes.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching Summer 2024. Join the waiting list!
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code

Here is how can I help you: