articleschannelstagsspacestoolkit
LogRocket Blog

How to use custom fonts in Tailwind CSS

View Original
thumbnail

Table of Contents

Applying the custom font family

To apply a custom font family in Tailwind CSS, add the font family to the element's class attribute like so:

<div class="font-custom">Custom Font</div>

Integrating Google Fonts with Tailwind CSS for custom styling

You can integrate Google Fonts with Tailwind CSS using various methods such as the google-fonts plugin, CDN link, or the @import rule. One way is to add the CDN link to your file:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Your+Font+Here">

Using the Tailwind CSS Typography plugin

The Tailwind CSS Typography plugin offers an alternative approach to customizing fonts in Tailwind CSS. Install the plugin and use it to add custom font styles to your project.

Using the CDN link

Another way to use Google Fonts in Tailwind CSS is by adding the CDN link to your file. For example, in a Next.js project:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Your+Font+Here">

Using the @import rule

You can import the Google Fonts CSS file into your Tailwind CSS file using the @import rule. Simply add the following to your CSS file:

@import url('https://fonts.googleapis.com/css?family=Your+Font+Here');

Adding local fonts with Tailwind CSS

To use local fonts with Tailwind CSS, add the font files to your project and register them as a plugin in your Tailwind config. You can also directly add font families to your CSS files.

Removing default Tailwind fonts

If you want to remove default fonts in Tailwind CSS for performance reasons, update your Tailwind config to remove the default font configurations that you are not using. For example:

module.exports = {
  theme: {
    fontFamily: {
      // Remove default fonts here
    },
  },
}