Adding Fonts To Tailwind CSS

Share:

Looking to add webfonts to your Tailwind CSS project?
This guide will help you add your own fonts to your project - by giving you three options to create font utilities

The first step is to load in your web font into the <head> section of your page

<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
or
<style>
  @import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
</style>

Then you have three methods for adding the font.

Option 1: Replace the default font utility classes with your own

Add your font(s) in the theme.fontFamily section of your Tailwind config as follows:

/* In your tailwind.config.js */

module.exports = {
  theme: {
    // Some useful comment
    fontFamily: {
      'nunito': ['nunito', 'sans-serif'],
      'MyFont': ['"My Font"', 'serif'] // Ensure fonts with spaces have " " surrounding it.
    },
  },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ]
}

This will generate the following font-<WhateverYouNamedIt> utility which you can use within your page (e.g. add it to <html> or <body>).

/* Generated by Tailwind CSS in your css file */

.font-nunito {
  font-family: nunito, sans-serif;
}

.font-MyFont {
  font-family: "My Font", serif;
}

Note: The default sans, serif or mono classes will not be created as you have not specified them in the config.

Option 2: Add it as an additional utility class

The "extend" functionality allows you to add your font(s) alongside the existing font utilities.

Add a theme.extend.fontFamily section to your Tailwind config as follows:

/* In your tailwind.config.js */

module.exports = {
  theme: {
    // Some useful comment
    extend: {
      fontFamily: {
        'nunito': ['nunito', 'sans-serif']
      },
    },
  },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ]
}

In this scenario, you are extending the default config, which means the new font family utility classes alongside the default font classes (sans, serif and mono).

/* Generated by Tailwind CSS in your css file */

.font-sans {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-mono {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-nunito {
  font-family: nunito, sans-serif;
}

Option 3: Amending one of the existing utility class

If you want to retain the existing font stack and just want to put your font into it, add a theme.fontFamily section with your font first and then including the default font-stack from the defaultTheme.fontFamily as follows:

/* In your tailwind.config.js */
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    // Some useful comment
    fontFamily: {
      'sans': ['nunito', ...defaultTheme.fontFamily.sans],
      'serif': [...defaultTheme.fontFamily.serif],
      'mono': [...defaultTheme.fontFamily.mono]
    },
  },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ]
}

This will retain the existing sans, serif or mono classes and just updates sans to have your font at the top of the font stack.

/* Generated by Tailwind CSS in your css file */

.font-sans {
  font-family: nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-mono {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Something wrong with the guide? Or any suggestions to make it better? Suggest an Edit.

Advertisment