Vite issue with using local/custom fonts

@font-face {
  font-family: "Bellafair-Regular";
  src: local("@/assets/fonts/Bellefair-Regular.ttf") format("truetype");
  // src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');
}

const path = require("path");
import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";


export default defineConfig({
  plugins: [react(), dynamicImport(/* options */)],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});