Custom @font-face Tailwind

Question

I've been working on a project using Tailwind. I'm trying to put a downloaded custom font using @font-face but it doesn't seem to load properly. By the way I put my font in public/assets/font.Please check my attempt below:

Here is the style.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
      font family: Trade Gothic LT;
      src: url("../public/assets/font/TradeGothicLT.woff") format("woff");
}

And here is the tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'body': ["Trade Gothic LT"]
      },
    },
  },
};

Please tell me where I went wrong. Thank you.

Answer 1

According to Tailwind official page :

Tailwind does not automatically escape font names for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.

{
  // Won't work:
  'body': ['Trade Gothic LT', ...],

  // Add quotes:
  'body': ['"Trade Gothic LT"', ...],

  // ...or escape the space:
  'body': ['Trade\\ Gothic\\ LT', ...],
}

Answer 2

In addition to the answer by saboshi69: https://stackoverflow.com/a/69162193/8040054

There is a little problem in your code in style.css:

font-family: 'Trade Gothic LT';

You need to add font name in quotes

Answer 3

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
      font family: Trade Gothic LT;
      src: url("../public/assets/font/TradeGothicLT.woff") format("woff");
}

I think it should named: font-family??

==> My Solution today for adding local-fonts was:

tailwind.css:

@tailwind base;
@tailwind components;

@font-face {
  font-family: "Dosis";
  src: local('Dosis'), url("/fonts/Dosis-Regular.woff2") format("woff2");
}    
@font-face {
  font-family: "Montserrat";
  src: local('Montserrat'), url("/fonts/Montserrat-Regular.woff2") format("woff2");
} 

@tailwind utilities;

tailwind.config.js:

/** @type {import('tailwindcss').Config} */

   
module.exports = {
  
  content: [
    './public/**/*.{html,js}',       
  ],

  theme: {

    extend: {
      
      fontFamily: {
        'dosis': ['Dosis', 'sans-serif'],        
        'mont': ['Montserrat', 'sans-serif'],
      },
    },
  },

  plugins: [],
}

The 2 fonts are under the Root-directory in the fonts Folder