How to use Google Fonts in TailwindCSS
Tags: tailwindcss, fonts, nextjs
Published: 2021-08-24 08:11:15

---
canonical_url: https://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](https://c.tenor.com/r3XdvPsAV3kAAAAC/despicable-me-minions.gif)

## 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](https://fonts.google.com) and select the font you want in your app.

I am gonna use  [Rampart One](https://fonts.google.com/specimen/Rampart+One?query=rampa) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629781870238/1ZwOEptMu.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629782111131/vX1S_-A9b.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629782313391/6tg1wKAS4.png)

**Useful links -**

[Github repository](https://github.com/avneesh0612/tailwind-font)

[TailwindCSS](https://tailwindcss.com/)

[Google Fonts](https://fonts.google.com/)

[All socials](https://avneesh-links.vercel.app/)