Vite - Separate chunk for fonts

I am building a library that contains components and some shared CSS, like a design system.

The problem is that it is not separating the fonts in different chunks, instead, it is inlining them in the font as base 64, so the CSS file gets huge!

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'design-system',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  resolve: {
    alias: [
      { find: '@', replacement: '/src' },
    ],
  },
});

I already tried to place it in root/public, but it didn't work.

I have a file _fonts.css which import fonts like so

@font-face {
  font-family: Inter;
  src: url('/public/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
}

And then I have a main.scss that imports it

// main.scss
@import 'normalize';
@import 'themes';
@import 'fonts';

Any idea on how to split it?