DEV Community

Ibrahim
Ibrahim

Posted on

3 Ways to Use Google Fonts in Tailwind CSS 4

#tailwindcss #webdev #design #css

Google Fonts is a service that provides free fonts to use on websites.

Tailwind CSS is a utility-first CSS framework for building modern websites.

There are 3 ways to use Google Fonts in Tailwind CSS 4.

Before going into how to use Google Fonts in Tailwind CSS 4, make sure the font you want to use is already linked in the HTML.

<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=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

Or via @import in a CSS file.

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
Enter fullscreen mode Exit fullscreen mode

Here are the three ways to use Google Fonts in Tailwind CSS 4.

1. Using Arbitrary Values

Google Fonts can be used with arbitrary values using the syntax font-[font_name].

<h1 class="font-[Raleway]">Raleway</h1>
Enter fullscreen mode Exit fullscreen mode

2. Using Theme Variables

Google Fonts can be used by adding the theme variable --font-*.

@theme {
  --font-raleway: "Raleway", "sans-serif"; 
}
Enter fullscreen mode Exit fullscreen mode

Example usage:

<h1 class="font-raleway">Raleway</h1>
Enter fullscreen mode Exit fullscreen mode

3. Setting as the Default Font

Google Fonts can be set as the default font by extending the --font-sans theme variable.

@theme {
  --font-sans: "Raleway", "sans-serif"; 
}
Enter fullscreen mode Exit fullscreen mode

Example usage:

<h1>Raleway</h1>
Enter fullscreen mode Exit fullscreen mode

That's it — 3 ways to use Google Fonts in Tailwind CSS 4. Hope it helps! If you have any questions or want to discuss, feel free to leave a comment below.

Top comments (0)