unplugin-fonts
㊗️ Universal Webfont loader - Unfonts
This plugin goes beyond just generating font-face rules - it also takes care of link preload and prefetch, optimizing font loading for a faster and more efficient user experience.
Unfonts currently supports popular font providers like Typekit, Google Fonts, and Fontsource, as well as custom fonts. This gives you the flexibility to choose from a vast range of fonts and seamlessly integrate them into your projects.
With Unfonts, you no longer have to manually manage font files and font-face rules, or worry about slow loading times. Our package does all the heavy lifting for you, so you can focus on creating amazing content with ease.
View configuration:
Install
npm i --save-dev unplugin-fonts
Vite
import Unfonts from 'unplugin-fonts/vite'
export default defineConfig({
plugins: [
Unfonts({ }),
],
})
Example: examples/vite
Webpack
Warning
Not implemented yet
module.exports = {
plugins: [
require('unplugin-fonts/webpack')({ })
]
}
Nuxt
export default {
modules: [
['unplugin-fonts/nuxt'],
],
unfonts: {
}
}
Example: examples/nuxt
SvelteKit
import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import Unfonts from 'unplugin-fonts/vite'
export default defineConfig({
plugins: [
sveltekit(),
Unfonts({
})
]
})
Example: examples/sveltekit
Astro
import { defineConfig } from 'astro/config'
import Unfonts from 'unplugin-fonts/astro'
export default defineConfig({
integrations: [
Unfonts({
})
]
})
---
// src/pages/index.astro
import Unfont from 'unplugin-fonts/astro/component.astro';
---
<html>
<head>
<Unfont />
</head>
<body>
<!-- ... -->
</body>
</html>
Example: examples/astro
Migrating from vite-plugin-fonts
// vite.config.ts
-import { VitePluginFonts } from 'vite-plugin-fonts'
+import Unfonts from 'unplugin-fonts/vite'
export default defineConfig({
plugins: [
- VitePluginFonts({
+ Unfonts({
/* options */
}),
],
})
// main.ts
-import 'virtual:fonts.css'
+import 'unfonts.css'
Import generated @font-rules
CSS
Note
Required if using custom or fontsource providers
import 'unfonts.css'
Providers
Typekit
Load fonts from Typekit.
Unfonts({
typekit: {
id: '<projectId>',
defer: true,
injectTo: 'head-prepend',
},
})
Google Fonts
Load fonts from Google Fonts.
Unfonts({
google: {
preconnect: false,
display: 'block',
text: 'ViteAwsom',
injectTo: 'head-prepend',
families: [
'Source Sans Pro',
{
name: 'Roboto',
styles: 'ital,wght@0,400;1,200',
defer: true,
},
],
},
})
Custom Fonts
Load custom fonts from files.
Unfonts({
custom: {
families: [{
name: 'Roboto',
local: 'Roboto',
src: './src/assets/fonts/*.ttf',
transform(font) {
if (font.basename === 'Roboto-Bold') {
font.weight = 700
}
return font
}
}],
display: 'auto',
preload: true,
prefetch: false,
injectTo: 'head-prepend',
},
})
Fontsource
Load fonts from Fontsource packages.
Note
You will need to install @fontsource/<font>
packages.
Unfonts({
fontsource: {
families: [
'ABeeZee',
'Inter Variable',
{
name: 'Roboto',
weights: [400, 700],
styles: ['italic', 'normal'],
subset: 'latin-ext',
},
{
name: 'Cabin',
variable: {
wght: true,
slnt: true,
ital: true,
},
},
],
},
})
Typescript Definitions
{
"compilerOptions": {
"types": ["unplugin-fonts/client"]
}
}
or
Resources