How to use Google Fonts in TailwindCSS

How to use Google Fonts in TailwindCSS

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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

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>
  );
}

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

Generating the config files -

npx tailwindcss init -p

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}"],

Change your globals.css

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

Starting the app

yarn dev # yarn
npm run dev # npm

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;
  • Inside themes > extend add a new property of fontFamily and give the font a name
 theme: {
    extend: {
      fontFamily: {
       Rampart: ["Rampart One", "cursive"],
      },
    },
  },

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>
    

Now you have got the beautiful font you need 🥳.

image.png

Useful links -

Github repository

TailwindCSS

Google Fonts

All socials

Interested in reading more such articles from Avneesh Agarwal?

Support the author by donating an amount of your choice.

Recent sponsors
 
Share this