Need help configuring vite.config.mjs

[LogansDad]

📚 Is your documentation request related to a problem?

Hello, first of all, thank you for this project! I am getting started and was wondering if you could help me get off the ground.

I have a webpage that uses a custom font, GraphikCondensed, and it has significant CLS on Chrome for Android.

The fallback font is Roboto, but I am on a Mac, so Roboto has been installed on the Mac. The woff2 file for the custom font, GraphikCondensed, has been placed under the fonts directory in the playground.

In vite.config.mjs, I am not sure about what needs to be in the options.

This is what index.css looks like...

@font-face {
  font-family: 'GraphikCondensed';
  src: local('GraphikCondensed'), url(/fonts/GraphikXXCondensed-Bold-Web.992f2cf.woff2)
      format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: 'GraphikCondensed';
  font-size: 3rem;
  line-height: 1.1;
}

What should the configuration for vite.config.mjs be? This is what I currently have...

import { defineConfig } from 'vite'
import { FontaineTransform } from 'fontaine'

export default defineConfig({
  plugins: [
    FontaineTransform.vite({
      fallbacks: ['Roboto'],
      // resolve absolute URL -> file
      resolvePath: (id) => 'file:///Library/fonts/Roboto-Regular.ttf',
    }),
  ],
})

Also, these changes were made in the /playground directory, then pnpm demo:dev was run. However, when opening the css file, the file has not been changed, and the font metrics for the override are not present. I do not see any error messages, so am wondering if I should be running another command.

🔍 Where should you find it?

readme

ℹ️ Additional context

No response