Font not loading in TailwindCSS

Question

I'm working on a React JS app with TailwindCSS, all Tailwind properties work, but the font is not updated when I run the app. If I put font with style prop, instead of className the font is shown correctly.

There is my page:

<div className="flex flex-row mr-8">
   <p className="text-white font-bold font-body">
    SALE ESPORTS
   </p>
</div>

This is my tailwind.config.js file

module.exports = {
  content: ["./src/**/*.{html, js, ts, jsx, tsx}"],
  theme: {
    fontFamily: {
      body: ["Chakra Petch"],
      gaming: ["Press Start 2P"],
      icons: ["Material Icons"],
    },
    extend: {
      colors: {
        primary: {
          accent: "#30ACFF",
          main: "#4448BB",
          dark: "#000A3B",
        },
        secondary: {
          accent: "#E84AE6",
          main: "#C01EE1",
          dark: "#70288F",
        },
        backColor: "#1A1B1F",
      },
    },
  },
  plugins: [],
};

There's my index.css

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

And in my index.html page I get the link from google fonts:

<link
      href="https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap"
      rel="stylesheet"
    />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="/dist/output.css" rel="stylesheet" />

In this picture I show the project structure:

try to inspect your page and check if your font is assigned to the element or not — Ali Hosseini
– Ali Hosseini, Commented Feb 28, 2023 at 17:02
as I mentioned in the question if I set the text font with prop "style" it works so it's probably a TailwindCss problem — kevinpcf
– kevinpcf, Commented Feb 28, 2023 at 17:48

e-motta · Accepted Answer · 2023-02-28 18:53:08Z

0

Import the font in your main css file:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap");

And either escape the spaces in the font names, or wrap them in quotes:

    fontFamily: {
      body: ['"Chakra Petch"'], // <= This works
      gaming: ["Press\\ Start 2P"], // <= This works
      icons: ["Material Icons"], // <= This doesn't work
    },

edited Feb 28, 2023 at 18:53

answered Feb 28, 2023 at 17:54

e-motta

7,5953 gold badges10 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kevinpcf Over a year ago

I tried but it still doesn't work

e-motta Over a year ago

You also need to escape the spaces in font names, I edit my answer to reflect that.

kevinpcf Over a year ago

It works because I have to set body like this: body: [" 'Chakra Petch' "] instaed of this: body: ["Chakra Petch"]

Collectives™ on Stack Overflow

Font not loading in TailwindCSS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related