Add Custom Tailwind CSS Fonts to your website

Orginally published at Medium on March 17th 2020.

extend Tailwind CSS configuration with local fonts or Google Fonts

Tailwind CSS offers developers powerful capabilities to build visually appealing websites in a short time frame. To give your website a unique look and feel, you can choose to add new fonts to the Tailwind configuration.

To give your website a unique look and feel, you can choose to add new fonts to the Tailwind configuration.

The default Tailwind classes include 3 different fonts. Font-sans is the default font that will be applied even when you don’t explicitly set the font-sans class. If you want to add more fonts to custom your website, Tailwind got your back too!

To use a different font, you could either use an @import from Google fonts or import the fonts locally into your project. For example, when Google Fonts does not have the specific font, you are looking for.

1a. Import Google Fonts

Visit Google Fonts and search for the specific font you like. Select the style variants from thin (100) to bold (900). Copy the import statement in between the style tags.

Import the new font in the CSS file where you import tailwind classes, i.e., styles.css. Note, your fonts must be loaded at the top of the file.

1b. Import local fonts

To create something more unique, find an appealing font that is not on Google Fonts, such as the handwritten Barcelony.

Create a fonts folder in the assets pipeline (i.e., assets/fonts). In the fonts folder, add one of your custom font files, for example:

• .ttf for TrueType Fonts
• .woff for Web Open Format
• .otf for OpenType

With Rails the trick is explicitly to load the newly created font folder into the application. In the application.rb file add:

Make sure to restart the server.

Next, add the font to the bottom of the styles.css file.

• font-family is the name that will be set into the Tailwind config file.
• src is the path where the local font can be found.

2. Overwrite or extend

You can either overwrite the default Tailwind fonts. Or you can extend and add your own. Using extend will add the newly specified font families without overriding Tailwind’s entire font stack.

If your app is already built, it makes sense to overwrite the font, so you save yourself the need to re-visit every paragraph element on your website to add the custom class.

In your tailwind.config.js file, add the chosen font-family.

Font-sans is now using Roboto. As Font-sans is the default, it’s not necessary to explicitly include that class on an element. Additionally, a new font-heading class is added. As the font-heading class was non-existing, it will be created. You could also have chosen to add it within the extend curly braces.

Font-heading is the newly added Poppins font for our heading/titles. To apply the Poppins font, you can add to the base layer or include the class manually in the HTML where needed.

3. Apply styles

Apply styles globally. In the file where you import the Tailwind classes add:

Any <h1> tag will now by default have the Poppins font applied. Be aware of order specificity. If you have add a font-class, i.e. font-mono, in the HTML on the h1 tag itself, font-mono will overwrite the global defined font-heading class.

Thanks for reading!

*image source: https://www.dafont.com/barcelony.font

Comments

[Lumii]

It works! Really appreciated!
I use the custom google font over all pages in NextJS.
My working example:
In globals.css:

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Ubuntu:wght@400&display=swap');

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

@layer base {
    html {
        font-family: Ubuntu;
    }
}

In tailwind.config.js:

module.exports = {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
        fontFamily: {
            'custom': ['ubuntu-mono', 'Ubuntu', 'sans-serif'],
        },
    },
    plugins: [],
}

That's all.

[Kelcio Barreto]

Thanks a lot! Very helpful article!

[EdroViegas]

I registered myself just to say : This an mazing content , very useful , keep going this way. Thank You

[Pathros]

How exactly do you import local .ttf font (path directory) into the tailwind.config.js file? I didn't get it.

[Edan Ben-Atar 🐒]

I'm not sure if that's possible. I know you can do something like this:

@layer base {
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-VariableFont.ttf') fromat('truetype');
  }
}

Would be cool to just add it at the config level!

[Mohamed Jbeli]

Is using font-url correct? It didn't work for me, I used url instead

[thomasvanholder]

That's right, font-url does not seems to work anymore.

This is a working example:

@font-face {
  font-family: 'KonstantGrotesk';
  src: url("KonstantGrotesk.otf");
}

[Mukadas Maltiti]

Thank you for this