how to add Custom WOFF & WOFF2 font in tailwindcss project

Question

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      mkder: "'Caviar Dreams'",
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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

@layer base{
    @font-face {
        font-family: 'Caviar Dreams';
        font-weight: bold;
        font-style: normal;

        src: url("/public/fonts/CaviarDreams-Bold.woff2") format("woff2"),
        url("/public/fonts/CaviarDreams-Bold.woff") format("woff");
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/build/styles.css">
    <title>Document</title>
</head>
<body>
    <p class="font-mkder bg-green-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, nisi incidunt? A sunt fugiat repellendus est molestiae, adipisci similique? Nam.</p>
</body>
</html>

How can use (WOFF) & ( woff2) font file in the tailwind project? If anyone worked with custom font please help. I already declared @font-face in my styles.css also extended the new font name. But it's not working. Screenshots are given below.

Hi, welcome to StackOverflow. Please try follow [this answer](https://stackoverflow.com/a/60857229) and [the docs](https://tailwindcss.com/docs/font-family). — hisam, Sep 16 '21 at 03:57

score 0 · Answer 1 · answered Jul 10 '22 at 03:34

My implementation is using TailwindCSS v3+ and I added this code to the input.css file after adding the directives:

@font-face {
    font-family: 'MyFont Regular';
    src: url('./assets/myfont-regular-webfont.woff') format('woff');
}

@layer base {
  html {
    font-family: MyFont Regular, system-ui, sans-serif;
  }
}

score 0 · Answer 2 · answered Apr 08 '23 at 04:53

I would like to share this solution that I am using in my project with React, TypeScript and Tailwind:

First, assuming I have the fonts in the '/public/fonts' directory, I am setting them up in a fonts.css file and importing them into the index.html file.

<!-- index.html -->
...
<link rel="stylesheet" href="/fonts.css" />
<!-- (I'm using vite and the files in the public directory are served at the root path) -->

/* fonts.css */
@font-face {
    font-family: 'London Boutique';
    src: url('./fonts/london_boutique/LondonBoutique_PERSONAL_USE_ONLY.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

Well, once we have set the fonts, we reference them from the tailwind config file:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    ...
    theme: {
        extend: {
            fontFamily: {
                LondonBoutique: ['London Boutique', 'sans-serif'],
            },
        },
    },
    ...
}

and then we can use the fonts with Tailwind:

...
<h1 className="text-3xl font-bold underline font-LondonBoutique">
    Hello world!
</h1>
...

how to add Custom WOFF & WOFF2 font in tailwindcss project

2 Answers2