How to apply Google Fonts to a Next.js and Tailwind CSS app.

I googled and have found some solutions for this.

But, here I share a simpler one.

• This is useful for one-off fonts on your project.

• There's no need to create _document.js or edit tailwind.config.js.

Solution

1. Go to Google Fonts and pick a font

   

2. Select @import and copy the codes

   

3. Paste it to styles/globals.css
   

   @import url('https://fonts.googleapis.com/css2?family=Caveat&family=Oswald:wght@200&display=swap');
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

4. Use it everywhere

   Type font-[<Your Font Name>] to apply.
   

<h1 className="font-bold text-4xl font-['Oswald']">This Is Title</h1>

Tips

If you use fonts which have spaces inside their names, concatenate them using -

e.g. font-['Cormorant-SC'] for Cormorant SC

My environment

• "next": "12.2.3"
• "react": "18.2.0"
• "tailwindcss": "^3.1.6"

Comments

[ironcladmerc]

this works and is fairly easy, but I am getting a "font pop-in" when initially loading my pages. The font appears normal and a half second later the Google Font "pops in" and it changes to the correct font. Is there a way to avoid this?