Subscribe

Use a Google Font in Tailwind CSS

✍️

Tutorial to teach you how to add a Google font to Tailwind with live demo. Add a custom font family through the googleapis CDN.

29 Jan, 2024 · 2 min read

Many publishers leverage Google Fonts to introduce excellent and custom fonts to a website.

…And fonts can make or break you’re website!

So, let’s take a look at how we can add Google Fonts to Tailwind with the plain HTML Tailwind starter we made yesterday.

If you’re looking to use a Google font in any project, check out how to use Google Fonts

With Tailwind, the process is similar, but we’ll need some features of the Tailwind CSS config.

The result with custom font will look like this:

Custom Google Font in Tailwind CSS

How to add Google Fonts to Tailwind

  1. head to Google Fonts and find a font family you want to use.

Open the font and click the “Select this style” button for each style you like:

Select Google Font style

With the font selected, you’ll get a sidebar on the right showing the <link> tag to add to the HEAD of our website. Copy all the link tags. Note the href-attribute referencing the fonts.googleapis.com CDN.

  1. Go back to your project and open the index.html file - then add the Google font import tags above the styles.css link-tag.
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- other stuff -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
</html>

Note: The second link specifies our custom font.

Use Google font in Tailwind

Now let’s customize our Tailwind theme with Google fonts.

Open the tailwind.config.js file and extend it with the fontFamily option.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'press-start': ['"Press Start 2P"', 'cursive'],
      },
    },
  },
};

If your font, like this example, uses spaces, it’s best to use the double escape '" - it will make sure the font is picked up correctly.

Now we can use the Google font as a CSS class named font-press-start in Tailwind.

For example, we can add the font family to our headline on the homepage like this:

<h1 class="text-6xl font-press-start">Welcome</h1>

The Tailwind code will render the following:

Google font added in Tailwind

You can find the complete code in this GitHub repo.

Go ahead, have a look and try adding other popular font families from Google, such as Poppins

Thank you for reading, and let’s connect!

Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Creating an animated wave line with Tailwind CSS

10 Mar, 2022 · 4 min read

Creating an animated wave line with Tailwind CSS

Tailwind CSS Numeric font variants

9 Mar, 2022 · 3 min read

Tailwind CSS Numeric font variants

Join 2099 devs and subscribe to my newsletter