Hey there! I was trying to bring in a custom font with vite and came across this handy plugin called vite-plugin-fonts. I set it up like this:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as path from "path";
import ViteFonts from "vite-plugin-fonts";
export default defineConfig({
plugins: [
react(),
ViteFonts({
// Custom fonts.
custom: {
families: [
{
name: "Gilroy-Light",
local: "Gilroy-Light",
src: "./fonts/Gilroy-Light.otf",
},
],
display: "auto",
preload: true,
},
}),
],
});
And in my css file
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Gilroy-Light", sans-serif;
}
However, I'm facing an issue where the font doesn't seem to work. Any idea what I might be missing?