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

26 2

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

profile
Sentry
 Promoted

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

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
profile
AWS
 Promoted

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Read next

codewithsadee profile image

Build & Deploy a Stunning SaaS Landing Page with React & Tailwind

Sadee -

shahidkhans profile image

Awesome Open-Source Free to use Tailwind CSS Component

Shahid -

williamsdev profile image

Horóscopo com IA: Uma Experiência com Next.js e Gemini

Frank William -

joodi profile image

Turbopack in Next.js: The Future of Development Bundling 🚀

Joodi -

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay