TailwindCSS custom Font Familly

How to use a different Font Familly with TailwindCSS?

Published 2021-07-16

How to use a different Font Familly with TailwindCSS?

It's not possible to change the default Font Familly with the CDN version of TailwindCSS. Because you'll need to change it into your tailwind.config.js file

The first step is to add the font family you want into your project. For example, you could add it into the head of your HTML file :

<head>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
</head>

<section class="flex justify-center items-center h-screen w-screen">
  <p class="text-9xl text-blue-700 font-sans">Hello, World</p>
</section>

If you want to override an existing font (for example, if you are going to use it all over your page) :

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

module.exports = {
  theme: {
    extend: {
      colors: {},
      fontFamily: {
        sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [],
}

If you want to create a new font utility (font-yourname) :

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    fontFamily: {
      custom: ['Montserrat', 'sans-serif'], // We can then use font-custom
    },
  },
  variants: {},
  plugins: [],
}

Related Tutorials :