Vite Font Optimization

Vite Font Optimization will automatically inline font CSS to improvement First Contentful Paint (FCP) and Largest Contentful Paint (LCP). For example:

``js
// Before
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>

// After

`

$3


Install the plugin with npm install vite-plugin-font-optimization or yarn add vite-plugin-font-optimization

Usage

Add the plugin to vite.config.ts or vite.config.js.

`js
import fontOptimizationPlugin from 'vite-plugin-font-optimization'

export default {
plugins: [fontOptimizationPlugin()]
}
`

Vite Font Optimization currently supports Google Fonts and Typekit. If you want to support additional fonts, you can set up providers like this below:

`js
import fontOptimizationPlugin from 'vite-plugin-font-optimization'

export default {
plugins: [fontOptimizationPlugin({
providers: ['https://fontlibrary.org//face/']
})]
}
`

Tests

Tests are using jest, to run the tests use:

`bash
$ npm run test
``