Search code examples
reactjstypescriptfontsnext.jstailwind-css

Custom font is not working in TailwindCSS & ReactJS project

I am using custom font in my React/TypeScript/TailWind/NextJS projects. I stored font in my /fonts folder as Glimer-Regular.ttf.

Then in my global.css I declared as below.

@layer base {

    @font-face {
        font-family: '"Glimer"';
        src: url(../../fonts/Glimer-Regular.ttf) format('ttf');
    }
}

In my tailwind.config.js file, I added font family as below.

module.exports = {
    mode: 'jit',
    important: true,

    purge: ['./src/pages/**/*.{js,ts,jsx,tsx}'],
    darkMode: false,
    content: [],
    theme: {
        extend: {
            fontFamily: {
                glimer: ['"Glimer"']
            },

This should work but the font is still default and showing serif-400. I still can see Glimer in family section but the font seems like not changed. Is there anything I am missing? enter image description here

Solution

  • I created this example with two different fonts..I hope You will Enjoy It ;-)! First, download the fonts you want to the font folder in Your project directory, below is the structure of the project's files and folders. This is my solution proposition:

    example.js

    function ExamplePage() {
  return (
    <div className="flex flex-col items-center justify-center h-screen gap-3">
      <h3 className="text-3xl font-custom1 text-blue-600">
        Sic Parvis Magna..
      </h3>
      <h3 className="text-3xl font-custom1 text-red-600">
        Per aspera ad astra..
      </h3>
      <h3 className="text-2xl font-custom2">
        In vino veritas, in aqua sanitas..
      </h3>
    </div>
  );
}

export default ExamplePage;

    tailwind.config.js

    module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      custom1: ["Custom-1", "sans-serif"],
      custom2: ["Custom-2", "sans-serif"],
    },

    extend: {},
  },
  plugins: [],
};

    globals.css

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

@font-face {
  font-family: "Custom-1";
  src: url("/font/NewTegomin-Regular.ttf");
}

@font-face {
  font-family: "Custom-2";
  src: url("/font/Nosifer-Regular.ttf");
}

    Project Folder & File structure:

    enter image description here

    Output:

    enter image description here

    Output small screen iPhone SE 2022 safari:

    enter image description here

    Tested with: "next": "12.0.7", "react": "17.0.2", "tailwindcss": "^3.0.5"