Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

How to use Google Fonts with Tailwind CSS

How to use Google Fonts with Tailwind CSS

Dhairya Shah's photo
Dhairya Shah
·Aug 13, 2022·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

We usually use Google Fonts with Vanilla CSS, but can you use them with Tailwind CSS as well? You certainly can. I'll show you how to use custom Google Fonts with Tailwind CSS in this article.

Visit Google Fonts and choose your favorite font,

Font screenshot Import font into your CSS file,

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

This is the default code in tailwind.config.js,

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now inside, theme object,

theme: {
    extend: {
      fontFamily: {
        amatica: ["Amatic SC", "cursive"],
        inter: ["Inter", "sans-serif"]
      }
    },
  },

Now inside, theme object we will add fonts

<h1 class="font-amatica">Hello World</h1>
<h2 class="font-inter">Hello World</h2>

Thank you for reading

Follow me on Twitter

Liked my content? Buy me a coffee to fuel my work. Thanks for reading!

 
Share this