How to Use Custom Fonts in Tailwind CSS with Example
Tags: tailwindcss, css, webdev, tutorial
Published: 2024-02-26 08:11:06

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!
<br>

## 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_
```css
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;
```
After that, make sure to specify your custom font family in the **tailwind.config.js** file.
_tailwind.config.js_
```js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
          'culpa': ['"Mea Culpa"', 'cursive']
      }
    },
  },
  plugins: [],
}
```
Now, in your HTML file, apply the **font-culpa** class along with your Tailwind CSS classes.
_Index.html_
```html
<div class="container mx-auto">
    <h1 class="text-4xl font-culpa">Tailwind CSS 3</h1>
</div>
```
![tailwind css custom fonts](https://larainfo.com/storage/canvas/images/7mGgvTz3h5QeTwLGukOsjT2fpnCrWaMLgfJ8J1ff.png)
<br>

## Example 2
Integrate a custom font into your HTML file using the link method.
```html
<!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>
```
![Google custom fonts in tailwind css 3](https://larainfo.com/storage/canvas/images/vzWAQ4nGjXjsWrJc3c34ONeftHKybBDVEUZH8Z2L.png)

## Read Also
[How to Make a File Upload Button with Tailwind CSS](https://larainfo.com/blogs/how-to-make-a-file-upload-button-with-tailwind-css)
[How to Create OTP Input with Tailwind CSS](https://larainfo.com/blogs/how-to-create-otp-input-with-tailwind-css)
[Responsive Profile Settings UI Design with Tailwind CSS](https://larainfo.com/blogs/responsive-profile-settings-ui-design-with-tailwind-css)
[Tailwind CSS Active Button After Click Example](https://larainfo.com/blogs/tailwind-css-active-button-after-click-example)
[Tailwind CSS Animated Search Form Example](https://larainfo.com/blogs/tailwind-css-animated-search-form-example)