Tailwind CSS and Fonts

#googlefonts #tailwindcss #montserrat

As a developer, there are situations that we run into and for some reason, our brain doesn't function the way we want it to and we have a really difficult time figuring out something so simple, or am I the only one? Today I was trying to import Google Montserrat Font into Tailwind.

After a handful of Google searches and trying out what other people did, I couldn't get it to work. So it basically came down to trial and error and this is what I came up with.

First, you have to import the link that Google Fonts provides:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap" rel="stylesheet">

Then, you have to extend the font in your Tailwind.js file:

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                'montserrat': ['Montserrat'],
                'lato': ['Lato'],
                'garamond': ['Garamond']
            }
        }
    },
    variants: {},
    plugins: [
        require('@tailwindcss/ui'),
    ]
}

Make sure you compile your assets and now you can use the following:

<div class="font-montserrat"></div>

The cool thing when you do it this way is Tailwind automatically adds the different weights as long as you include them in the Google Fonts Link. So we can do something like this:

<div class="font-montserrat font-light"></div>

I wanted to write this short article to hopefully save someone else from wasting valuable time. I hope this article helps you out and if you know of a better way or another way please leave the details in the comments.