Search code examples
reactjstypescripttailwind-csstsx

Font not loading in TailwindCSS

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:
1

Solution

  • 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
    },