https://github.com/imufeng/vite-plugin-font-optimization
Automatically inline font CSS to improvement FCP and LCP
https://github.com/imufeng/vite-plugin-font-optimization
googlefonts typekit vite vite-plugin webfonts
Last synced: 6 months ago
JSON representation
Automatically inline font CSS to improvement FCP and LCP
- Host: GitHub
- URL: https://github.com/imufeng/vite-plugin-font-optimization
- Owner: iMuFeng
- License: mit
- Created: 2022-03-11T06:25:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-09-05T06:28:32.000Z (about 3 years ago)
- Last Synced: 2025-03-21T13:56:59.552Z (7 months ago)
- Topics: googlefonts, typekit, vite, vite-plugin, webfonts
- Language: TypeScript
- Homepage:
- Size: 331 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite Font Optimization
Vite Font Optimization will automatically inline font CSS to improvement [First Contentful Paint (FCP)](https://web.dev/fcp/) and [Largest Contentful Paint (LCP)](https://vercel.com/blog/core-web-vitals#largest-contentful-paint). For example:
```js
// Before
// After
@font-face{font-family:'Inter';font-style:normal...
```
### Installation
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
```