Custom Font Family not working in Tailwind theme configuration

Question

I have customized the default theme for my project. Here is the theme section of my tailwind.config.js file:

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      tablet: "768px",
      // => @media (min-width: 768px) and (max-width: 1023px) { ... }

      desktop: "1024px",
      // => @media (min-width: 1024px) { ... }
    },
    fontFamily: {
      Inter: ["Inter"],
      '"Work Sans"': ['"Work Sans"'],
      '"Open Sans"': ['"Open Sans"'],
      Montserrat: ["Montserrat"],
    },
    backgroundColor: () => ({
      primary: "#0C1F4F",
      secondary: "#1fc69a",
    }),
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

The problem is fontFamily that contains a space ie Work Sans does not working while Inter is working. I have followed the documentation .

Note that 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:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}

But seems that not working.

<button className="w-40 h-12 bg-secondary rounded-lg font-semibold font-Work Sans text-xl">
  Get a quote
</button>

Answer 1

The reason is I'm using space between words, as a result not changing font. So, by using camelCase or word-word will be fixed.

Here is the code:

fontFamily: {
  inter: "Inter",
  workSans: "Work Sans",
  openSans: "Open Sans",
  Montserrat: "Montserrat",
}

<button className="w-40 h-12 bg-secondary rounded-lg font-semibold font-workSans text-xl">
  Get a quote
</button>