CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Pradeep Bisht
Pradeep Bisht

Reputation: 43

static font not applied in tailwind

i am using tailwind css + next js. i am unable to import static font from /fonts/rubik.woff2 file

//gobals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@fontface {
  font-family: "rubik";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(/fonts/rubik.woff2) format("woff2");
}


//tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    FontFace: {},
    fontFamily: {
      home: ["rubik", "cursive"],
    },
  },
  plugins: [],
};

can anyone tell me what i am doing wrong?

sandBox:- https://codesandbox.io/s/suspicious-frost-ujdocz?file=/src/styles.css

I have tried almost everything in my knowledge but i am unable to make it work. The project file structure

file structure

Upvotes: 3

Views: 576

Answers (1)

Vijayaraghavan Sundararaman
Vijayaraghavan Sundararaman

Reputation: 932

Below are the steps you can follow, have created a StackBlitz example https://stackblitz.com/edit/github-9aq3v4-ozdwn4?file=styles%2Fglobals.css

  1. Extend your tailwind theme in tailwind.config.js
 theme: {
    extend: {
      fontFamily: {
        Rubik: ['Rubik'],
      },
    },
  },

  1. Copy the fonts at the root level enter image description here

  2. Import the font correctly in the styles/golbals.css


@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
  1. Use the font
 <h1 className="text-6xl font-Rubik">
Hello
</h1>

Upvotes: 2

Related Questions