DEV Community

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

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

How to use Google Fonts in TailwindCSS

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

Discussion (0)