DEV Community 👩‍💻👨‍💻

Cover image for Tailwind CSS Use Custom Fonts Example
larainfo
larainfo

Posted on • Originally published at larainfo.com

Tailwind CSS Use Custom Fonts Example

In this section we will add google family fonts in tailwindcss. We will see both custom font @import and link method in tailwind css 3. First you need to install & setup tailwind or you can read How to install & setup Tailwind CSS v3.

view

Example 1

Add Custom font in CSS using @import method. you should add the google font css url in 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

Next, you need to add fontfamily in your tailwind.config.js
tailwind.config.js

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

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 font use

Example 2

Add Custom font in html file using 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

tailwind google font use

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.