React and Tailwind Custom Fonts from ttf file

Hey i want to add some custom fonts from files.

These are the font files that i want to load.

My index.css

body {
  margin: 0;
  padding: 0;
}

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&display=swap");

@tailwind base;
@tailwind components;

@tailwind utilities;

Thanks in advance