Custom fonts not working in new version of tailwindcss

I want to use custom fonts in my app but the custom fonts wont work. tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        heliosbold: ["HeliosBold", "sans-serif"],
        helios: ["Helios", "sans-serif"],
      },
    },
  },
  plugins: [],
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        heliosbold: ["HeliosBold", "sans-serif"],
        helios: ["Helios", "sans-serif"],
      },
    },
  },
  plugins: [],
};

global.css

@font-face {
    font-family: HeliosBold;
    src: url('/fonts/heliosBold.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  
  
  @font-face {
    font-family: Helios;
    src: url('/fonts/helios.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }

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

@font-face {
    font-family: HeliosBold;
    src: url('/fonts/heliosBold.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  
  
  @font-face {
    font-family: Helios;
    src: url('/fonts/helios.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }

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

I used this exact code and it worked fine in tailwind 3.0.24, but it doesn't work in 3.1.6 anyone knows what has changed/what I'm doing wrong?

1 Reply

Unknown User•3y ago

Message Not Public

Gaming

Programming

Custom fonts not working in new version of tailwindcss