/

How to Use Custom Fonts with Tailwind CSS

How to Use Custom Fonts with Tailwind CSS

If you’re using Tailwind CSS in your app, you may want to use custom fonts to enhance the visual appeal of your website. Here’s a step-by-step guide on how to incorporate custom fonts into your Tailwind CSS project.

First, assuming that you have already configured your app to use Tailwind CSS, you will have a CSS file that contains the following code:

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

To begin, navigate to Google Fonts (or any other font provider of your choice) and select the font you’d like to use. Once you’ve chosen a font, you’ll be provided with a @import statement for the font’s CSS file.

For instance, let’s say you’ve selected the “Inter” font in various weights. The @import statement for this font would look like this:

1
@import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap');

Add this @import statement to your CSS file to import the font’s CSS.

Next, you’ll need to specify the font for your HTML elements. You can do this by adding the following code to your CSS file:

1
2
3
4
5
@layer base {
  html {
    font-family: Inter, system-ui, sans-serif;
  }
}

This code sets the font family of the html element to “Inter” and falls back to the system UI font and sans-serif fonts if “Inter” is not available.

Once you have added these CSS rules, your CSS file will look like this:

1
2
3
4
5
6
7
8
9
10
11
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap');

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

With this setup, the “Inter” font will be applied as the default font throughout your website. You can now use utility classes like font-bold or font-medium to apply different font styles and weights to specific elements.

By following these steps, you can easily incorporate custom fonts into your Tailwind CSS project and create a more visually appealing website.

tags: [“Tailwind CSS”, “custom fonts”, “web development”, “CSS styling”]