DEV Community

Cover image for How to use Google Fonts in TailwindCSS
Avneesh Agarwal
Avneesh Agarwal

Posted on • Edited on • Originally published at blog.avneesh.tech

How to use Google Fonts in TailwindCSS

#tailwindcss #fonts #nextjs

We would like to use some beautiful fonts in our app, so I will teach you how to do that in this article. I am going to use Next.js today but you can use it in any other framework/library or vanilla as well. The procedure is going to be pretty much the same.

let's get started

Setting up the app

Creating a Next.js app

npx create-next-app next-tailwind-ts-demo
Enter fullscreen mode Exit fullscreen mode

Cleanup

Delete everything under the Head tag until the footer like this

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Adding Tailwind to the app

Installing the dependencies -

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest # yarn
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # npm
Enter fullscreen mode Exit fullscreen mode

Generating the config files -

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

This will generate tailwind.config.js and postcss.config.js

Adding the files to purge through
Replace the purge in tailwind.config.js with this

  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
Enter fullscreen mode Exit fullscreen mode

Change your globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Starting the app 

yarn dev # yarn
npm run dev # npm
Enter fullscreen mode Exit fullscreen mode

Getting our custom font

Go to Google Fonts and select the font you want in your app.

I am gonna use Rampart One for this demo.

  • Click on "Select this style" and a sidebar should pop in.
  • Now copy the import URL given in Use on the web section.

image.png

Using the font

To use the font follow these steps-

  • Paste the import in globasl.css 
@import url("https://fonts.googleapis.com/css2?family=Rampart+One&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • Inside themes > extend add a new property of fontFamily and give the font a name 
 theme: {
    extend: {
      fontFamily: {
       Rampart: ["Rampart One", "cursive"],
      },
    },
  },
Enter fullscreen mode Exit fullscreen mode

The rules in the array should be the same as given in Google fonts.

image.png

  • Now you can give any tag the className of font-fontName in this case font-Rampart. 
<h1 className="font-Rampart">This is using a custom font</h1>
Enter fullscreen mode Exit fullscreen mode

Now you have got the beautiful font you need 🥳.

image.png

Useful links -

Github repository

TailwindCSS

Google Fonts

All socials

Top comments (4)

Collapse
 
kanishkkhurana profile image
Kanishk Khurana •

Great share ! I was trying to figure out where to put the import statement for so long !

Collapse
 
yasuhiron777 profile image
Yasuhiro Nagata •

Thank you!
Your post helped me save my time!

Collapse
 
ekimcem profile image
Ekim Cem Ülger • • Edited

What if we do not extend and want to change all of fonts so we will not need to type font-[fontname] everytime, how can we do it?

I tried just add the fontFamily in the same level of extend but it didnt work.
@avneesh0612

Collapse
 
jassehomar profile image
Omar Jasseh •

@ekimcem you can do that by adding below snippet to your main CSS file in this case in global.css

@layer base {
  html {
    font-family: "Rampart One", cursive;
  }
}
Enter fullscreen mode Exit fullscreen mode

So for example your final version of global.css should like below

@import url("https://fonts.googleapis.com/css2?family=Rampart+One&display=swap");

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

@layer base {
  html {
    font-family: "Rampart One", cursive;
  }
}
Enter fullscreen mode Exit fullscreen mode

Read next

nadhir2k profile image

🌱 New Portfolio Website Live, Would Love Your Feedback!

Nadhir -

shivamkatare profile image

Create Beautiful Scroll Animations Using Framer Motion

Shivam Katare -

prashant-ardeshana profile image

#3 How to fetch the store details and print to the fronted using react Next.

Prashant Ardeshana -

fleek_ profile image

Introducing Fullstack Next.js Support on Fleek: Build, Deploy, and Scale Dynamic Apps with Ease

Fleek -