Custom fonts not working in new version of tailwindcss

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

@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;