How to Add Google Fonts to a Tailwind Project

Elvis Duru / July 29, 2022

4 min read • --- views

Overview

In this tutorial you will learn how to add, and use google fonts in your Tailwind project in simple steps. If you want to learn how to install and configure Tailwind with CSS-in-JS in a react app, you can read this guide.

Prerequisite

You will need to have a Tailwind project set up to continue, if you already have one you can skip to the next step. You can start by cloning this tailwind-react starter I created for this tutorial. If you use a different framework, you can read the official Tailwind installation guide for your framework here.

Finding a Google Font

To add Google fonts to your project you first need to find the font of your choice at Google Fonts

I have chosen to use the Satisfy font for this tutorial, but you can use any other font.

Select the styles you need for your app by clicking the button with the font style and weight:

When you’re done selecting, you can check the sidebar at the right and copy the HTML snippet Google Font generates for you. You can find that at the section with the “Use for the web” heading:

Also take note of the CSS rule to specify the font family. For example, the CSS rule for the font I’m adding is "Satisfy", cursive;. We’ll need that when we’re configuring Tailwind to use our google font.

Adding a Google Font

Now that we have found our font of choice, we can add the Google font by pasting the HTML code generated from the Google Font website into the <head> of our project’s root index.html file:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React</title>

  <!-- Google font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>

Configure Tailwind to use a Google Font

Finally, to configure your Tailwind theme to use a Google font, you need to edit the theme.fontFamily section of your Tailwind config. Navigate to the tailwind.config.js file in your project and edit the theme.fontFamily section with the CSS rule for the Google font you added. For our example, the CSS rule is "Satisfy", cursive;.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    fontFamily: {
      display: ["Satisfy", "cursive"],
    },
  },
  plugins: [],
};

Note: We specify the font-families as string values in the array.

By specifying our fontFamily key as display, Tailwind will make it available as a class name font-display.

Using the Google Font

To make use of our new Google font, we only need to specify the font-display class name Tailwind creates for us anywhere we need the font style in our code. If you’ve been using the tailwind-react starter, you can navigate to the App.jsx file in the src directory and then add the font-display class name to the <h1> element to test the font style.

function App() {
  return (
    <div className="max-w-4xl mx-auto text-center h-screen flex flex-col justify-center">
      <h1 className="text-6xl font-display">Love Code</h1>
    </div>
  );
}

export default App;

This will give us the following result:

Conclusion

And there it is! We’ve been able to add a Google font to our project using Tailwind CSS. You can find the final code on Github for reference.

If you enjoyed this tutorial and would like to receive the latest updates and tutorials on everything web development related, please subscribe to my newsletter, or follow me on Twitter.