https://github.com/daun/vite-plugin-font-manifest
Add font information to Vite build manifests
https://github.com/daun/vite-plugin-font-manifest
Last synced: 8 months ago
JSON representation
Add font information to Vite build manifests
- Host: GitHub
- URL: https://github.com/daun/vite-plugin-font-manifest
- Owner: daun
- License: mit
- Created: 2025-06-16T14:58:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-17T11:56:12.000Z (12 months ago)
- Last Synced: 2025-06-17T12:41:41.789Z (12 months ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite Font Manifest Plugin
A Vite plugin for adding font information to the build manifest.
Useful for optimizing font loading by generating preload hints or inlining the
font-face CSS declarations.
## Example
**Before**
```json
{
"src/fonts/Inter-Regular.woff2": {
"file": "assets/Inter-Regular-CnZ_CWUo.woff2",
"src": "src/fonts/Inter-Regular.woff2"
}
}
```
**After**
```json
{
"src/fonts/Inter-Regular.woff2": {
"file": "assets/Inter-Regular-CnZ_CWUo.woff2",
"src": "src/fonts/Inter-Regular.woff2",
"fontFace": {
"family": "Inter",
"weight": "400",
"style": "normal",
"mime": "font/woff2",
"css": "@font-face { /* */ }",
"definedIn": ["src/css/display.css"]
}
}
}
```
## Install
Using npm:
```console
npm install vite-plugin-font-manifest --save-dev
```
## Usage
### Generating the manifest
Add the plugin to your `vite.config.js` file.
```js
import { defineConfig } from 'vite'
import fontManifest from 'vite-plugin-font-manifest'
export default defineConfig({
plugins: [
fontManifest(),
]
})
```
### Preloading fonts
To preload fonts, parse the build manifest and add `` tags for each font. This
example is written in Twig and limits preloading to `woff2` fonts for modern browsers.
```twig
{% for src, entry in manifest %}
{% if entry.fontFace is defined and entry.fontFace.format == 'woff2' %}
{% endif %}
{% endfor %}
```
You can optionally also inline the original font-face declaration in a `` tag as fallback for
browsers that do not support preloading.
```twig
{% for src, entry in manifest %}
{% if entry.fontFace is defined %}
<style>{{ entry.fontFace.css }}
{% endif %}
{% endfor %}
```
## Options
The plugin currently accepts no options. Feel free to open an issue if you need additional flags.
## License
[MIT](./LICENSE)