Custom @font-face Tailwind - font isn't displaying-CodePudding

I'm trying to add a custom font to a React project that uses Tailwind.

I've added the font - tiempos-headline-medium.woff2 to /public and changed the following:

node_modules > tailwindcss > tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

@font-face {
    font-family: "tiempos-headline";
    src: local('tiempos-headline'), url("tiempos-headline-medium.woff2") format("woff2");
    font-weight: 600;
  }

tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          'pink-link': '#FB335A',
          'pink': '#FB335A',
          300: '#000000',
          400: '#f8f8f8',
          500: '#000000',
          600: '#000000',
          700: '#000000',
        }
      },
      animation: {
        loading: 'rotate 1s linear infinite',
      }
    },
    fontFamily: {
      sans: ['aktiv-grotesk', 'sans-serif'],
      serif: ['tiempos-headline', 'serif'],
    },
  },
  plugins: [],
}

But the font isn't showing - it's displaying just a serif - any ideas where I'm going wrong?

CodePudding user response：

firstly include it my index.html file as a link you can see poppins

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg xml" href="/vite.svg" />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
            rel="stylesheet"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bhrugu Tundeliya</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/src/main.tsx"></script>
    </body>
</html>

so this is how I am doing it with tailwind

    /** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './index.html',
        './src/**/*.{js,ts,jsx,tsx}',
        './src/**.{js,ts,jsx,tsx}',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                'react-color': '#61DBFB',
            },
            backgroundImage: {
                Icsun: "url('./src/asset/sunny.png')",
                Icmoon: "url('./src/asset/half-moon.png')",
            },
            fontFamily: {
                poppins: ['poppins', 'sans-serif'],
            },
            animation: {
                '0%, 100%': { transform: 'rotate(-3deg)' },
                '50%': { transform: 'rotate(3deg)' },
            },
        },
    },
    plugins: [],
}

and in the common text component that I use everywhere

export const Text = ({
    children,
    className,
    onm ouseLeave,
    onm ouseDown,
    onm ouseEnter,
    onm ouseUp,
}: TextProps) => {
    return (
        <label
            onm ouseLeave={onMouseLeave}
            onm ouseDown={onMouseDown}
            onm ouseEnter={onMouseEnter}
            onm ouseUp={onMouseUp}
            className={`font-poppins ${className}`}
        >
            {children}
        </label>
    )
}

and it workes just fine.. you can spicy in the body in CSS also. I like to control all text so I make a component always.

CodePudding user response：

First make sure that the path of the font is correct in your font-face directive in the css file.

With a file structure like:

root_project
  | tailwind.config.js
  | node_modules
  | src
  | public
  | __ images
  | __ fonts
      | tiempos-headline-medium.woff2
  ...

Write your css path with an absolute path : url("/fonts/tiempos-headline-medium.woff2")

In tailwind.config.js file, move the directive fontFamily: {} into the extend: {} object to add a font and extend the font config.