DEV Community

Cover image for Tailwind CSS and Fonts
Jonathon Ringeisen
Jonathon Ringeisen

Posted on • Updated on

Tailwind CSS and Fonts

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=";200;300;400;500;600;700;800;900&family=Roboto&display=swap" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

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: [
Enter fullscreen mode Exit fullscreen mode

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

<div class="font-montserrat"></div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

reduan2660 profile image
Red • Edited

import link in which file ? -.-
( using react )

jringeisen profile image
Jonathon Ringeisen • Edited

In the head of your main view, same place you import your style sheets and JavaScript.