Cannot load custom fonts when using tailwind and react template

[nilansaha]

I added this code in the styles.css file

@font-face {
  font-family: "DM Mono";
  font-weight: 100 800;
  font-display: block;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("/fonts/DMMonoRegular.woff2") format("woff2");
}

Then I added this code in the tailwind.config.js

theme: {
    extend: {
      fontFamily: {
        sans: ["DM Sans", "sans-serif"],
      },
    },
  },

And I obviously added the font-sans class in a div. But the fonts don't loaded and are not reflected in the styling. Has anyone found a way to do this?