How to use Google Fonts in Tailwind CSS?

Last Updated : 15 Jan, 2025

Google Fonts in Tailwind CSS enhances webpage design with free and easy-to-use fonts. It provides a library of 1000+ fonts served by Google servers.

Add the Google Fonts API link to your HTML file's <head>.
Configure tailwind.config.js to include the font under fontFamily.

Tailwind comes with three default font styles, they are font-sans, font-serif, and font-mono.

font-sans: Sans-serif fonts for clean, readable text, ideal for screens.
font-serif: Serif fonts for elegant designs, suitable for print.
font-mono: Monospace fonts for technical documents and code.

Syntax:

variableName: ['Lato', 'sans-serif']

To use Google fonts, you just need to set up Tailwind-CSS in your system you can refer to this article "How to set up Tailwind-CSS with Vite?".

Once you install tailwind the project structure will be the same as the below image

Steps to Apply Google Font Style in Tailwind CSS

Step 1: Find your Google Font Family

To find out your desired font family go to Google font. Once you get into the google fonts webpage, you can either search for font family or scroll throughout the page and select your desired font family.

Step 2: Select font style

Now, you find out the font family that you wanna use, click on that font family, and select the font styles according to thickness and boldness that are required for the webpage.

Step 3: Check the Selected Font Styles

After selecting font styles a side window pop-up that consists of all the links and rules to use Google fonts. If the side window doesn't show up then click on the button at the right-top(also shown in the image attached) of the webpage.

Step 4: Copy the link Tag

In the side window, all the necessary link and rules are written which needs to be copied and then pasted into the HTML into the head tag.

Step 5: Extend Font Family

To extend the font family in Tailwind, we need to configure the tailwind.config.js file and add the rules that were mentioned in the side window of the google fonts webpage.

Filename: tailwind.config.js

JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["*"],
    theme: {
        extend: {
            fontFamily: {
                "lato": ['Lato', 'sans-serif']
            }
        },
    },
    plugins: [],
}

We can check for CSS rules to specify families at the bottom of the side window.

Project Structure

How to use google fonts in Tailwind CSS ?

Step 6: Test New Google Fonts

npm run start

lato font family from Google fonts.

index.html

HTML

<!-- index.html -->
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link href="/dist/output.css" rel="stylesheet">
    <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=Lato&display=swap"
        rel="stylesheet">
</head>
<body>
    <div class="flex justify-center 
        items-center min-h-screen">
        <div class="bg-green-700 p-8 text-3xl 
            font-lato rounded-2xl shadow-2xl">
            <p>Welcome to Geeks for Geeks</p>
        </div>
    </div>
</body>
</html>

CSS

/* styles.css */

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

HTML Structure: The HTML file links to external stylesheets, including Tailwind CSS and Google Fonts, and applies the 'Lato' font to the text within a styled div.
Tailwind CSS Integration: The styles.css file imports Tailwind's base, components, and utilities, enabling the use of Tailwind's utility classes for styling the webpage.

Tilt Prism font family from google fonts.

HTML

<!-- index.html -->
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="/dist/output.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com" 
        crossorigin>
    <link href=
"https://fonts.googleapis.com/css2?family=Tilt+Prism&display=swap" 
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="flex justify-center 
        items-center min-h-screen">
        <div class="bg-green-700 p-8 text-3xl 
            font-tilt_prism rounded-2xl shadow-2xl">
            <p>Welcome to Geeks for Geeks</p>
        </div>
    </div>
</body>

</html>

CSS

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

HTML Integration: The HTML file includes preconnect links to Google Fonts servers, ensuring efficient font loading, and links to external stylesheets for styling.
Tailwind CSS Configuration: The styles.css file imports Tailwind's base, components, and utilities, enabling the use of Tailwind's utility classes for streamlined styling.

How to use Tailwind CSS with Django ?

uditn007

Improve

Article Tags :