DEV Community

Cover image for How to Use Custom Fonts in Tailwind CSS with Example
saim
saim

Posted on • Originally published at larainfo.com

How to Use Custom Fonts in Tailwind CSS with Example

Welcome to our quick tutorial on using custom fonts in Tailwind CSS! Fonts are like the personality of your website, and with Tailwind CSS, you can easily give your site its own unique style. In this guide, we'll show you, step by step, how to add custom fonts to your Tailwind CSS project. Whether you're new to web development or just want to spruce up your design skills, we've got you covered. Let's get started!

Example 1

Incorporate a custom font into your CSS using the @import method. Remember to insert the URL for the Google Font CSS within the Tailwind directives file.
src/input.css _or _main.css or tailwind.css



@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');

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


Enter fullscreen mode Exit fullscreen mode

After that, make sure to specify your custom font family in the tailwind.config.js file.
tailwind.config.js



module.exports = {
  theme: {
    extend: {
      fontFamily: {
          'culpa': ['"Mea Culpa"', 'cursive']
      }
    },
  },
  plugins: [],
}


Enter fullscreen mode Exit fullscreen mode

Now, in your HTML file, apply the font-culpa class along with your Tailwind CSS classes.
Index.html



<div class="container mx-auto">
    <h1 class="text-4xl font-culpa">Tailwind CSS 3</h1>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind css custom fonts

Example 2

Integrate a custom font into your HTML file using the link method.



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

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Google Fonts</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Mea+Culpa&display=swap" rel="stylesheet">s
    <script>
      tailwind.config = {
        theme: {
          extend: {
            fontFamily: {
              'culpa': ['"Mea Culpa"', 'cursive']
            }
          }
        }
      }
    </script>
  </head>

  <body>
    <div class="container m-12 mx-auto">
      <h1 class="text-6xl font-culpa">Tailwind CSS 3</h1>
    </div>
  </body>

</html>


Enter fullscreen mode Exit fullscreen mode

Google custom fonts in tailwind css 3

Read Also

How to Make a File Upload Button with Tailwind CSS
How to Create OTP Input with Tailwind CSS
Responsive Profile Settings UI Design with Tailwind CSS
Tailwind CSS Active Button After Click Example
Tailwind CSS Animated Search Form Example

Top comments (0)