Gathering detailed insights and metrics for unplugin-fonts
Gathering detailed insights and metrics for unplugin-fonts
Universal Webfont loader - Unfonts - based on https://web.dev/optimize-webfont-loading/
Installations
npm install unplugin-fontsDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.18.0
NPM Version
10.8.2
Releases
8
Languages
3
TypeScript
Astro
JavaScript
TypeScript (98.89%)
Astro (0.69%)
JavaScript (0.42%)
Developer
cssninjaStudio
Download Statistics
Total Downloads
4,756,927
Last Day
2,646
Last Week
66,524
Last Month
336,263
Last Year
3,779,319
GitHub Statistics
MIT License
393 Stars
110 Commits
31 Forks
2 Watchers
8 Branches
14 Contributors
Updated on Jul 08, 2025
Maintainers
1
Package Meta Information
Latest Version
1.3.1
Package Id
unplugin-fonts@1.3.1
Unpacked Size
476.69 kB
Size
107.96 kB
File Count
40
NPM Version
10.8.2
Node Version
20.18.0
Published on
Dec 01, 2024
Total Downloads
Cumulative downloads
Total Downloads
4,756,927
Last Day
-43.1%
2,646
Compared to previous day
Last Week
-24.5%
66,524
Compared to previous week
Last Month
-18.1%
336,263
Compared to previous month
Last Year
297%
3,779,319
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
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
1npm i --save-dev unplugin-fonts # pnpm add -D unplugin-fonts
Vite
1// vite.config.ts 2import Unfonts from 'unplugin-fonts/vite' 3 4export default defineConfig({ 5 plugins: [ 6 Unfonts({ /* options */ }), 7 ], 8})
Example: examples/vite
Webpack
Warning Not implemented yet
1// webpack.config.js 2module.exports = { 3 /* ... */ 4 plugins: [ 5 require('unplugin-fonts/webpack')({ /* options */ }) 6 ] 7}
Nuxt
1// nuxt.config.js 2export default { 3 modules: [ 4 ['unplugin-fonts/nuxt'], 5 ], 6 unfonts: { 7 /* options */ 8 } 9}
Example: examples/nuxt
SvelteKit
1import { sveltekit } from '@sveltejs/kit/vite' 2import Unfonts from 'unplugin-fonts/vite' 3// vite.config.ts 4import { defineConfig } from 'vite' 5 6export default defineConfig({ 7 plugins: [ 8 sveltekit(), 9 Unfonts({ 10 /* options */ 11 }) 12 ] 13})
1<script> 2// +layout.svelte 3import { links } from 'unplugin-fonts/head' 4</script> 5 6<svelte:head> 7 {#each links as link} 8 <link {...link?.attrs || {}} /> 9 {/each} 10</svelte:head>
Example: examples/sveltekit
Astro
1// astro.config.js 2import { defineConfig } from 'astro/config' 3import Unfonts from 'unplugin-fonts/astro' 4 5export default defineConfig({ 6 integrations: [ 7 Unfonts({ 8 /* options */ 9 }) 10 ] 11})
1--- 2// src/pages/index.astro 3import Unfont from 'unplugin-fonts/astro/component.astro'; 4--- 5 6<html> 7 <head> 8 <Unfont /> 9 </head> 10 <body> 11 <!-- ... --> 12 </body> 13</html>
Example: examples/astro
Migrating from vite-plugin-fonts
1// vite.config.ts 2-import { VitePluginFonts } from 'vite-plugin-fonts' 3+import Unfonts from 'unplugin-fonts/vite' 4 5export default defineConfig({ 6 plugins: [ 7- VitePluginFonts({ 8+ Unfonts({ 9 /* options */ 10 }), 11 ], 12})
1// main.ts 2-import 'virtual:fonts.css' 3+import 'unfonts.css'
Import generated @font-rules CSS
Note Required if using custom or fontsource providers
1import 'unfonts.css'
Providers
Typekit
Load fonts from Typekit.
1Unfonts({
2 // Typekit API
3 typekit: {
4 /**
5 * Typekit project id
6 */
7 id: '<projectId>',
8
9 /**
10 * customizes the base URL for the font request
11 * default: 'https://use.typekit.net/'
12 */
13 fontBaseUrl: 'https://use.typekit.net/',
14
15 /**
16 * enable non-blocking renderer
17 * <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
18 * default: true
19 */
20 defer: true,
21
22 /**
23 * define where the font load tags should be inserted
24 * default: 'head-prepend'
25 * values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
26 */
27 injectTo: 'head-prepend',
28 },
29})Google Fonts
Load fonts from Google Fonts.
1Unfonts({
2 // Google Fonts API V2
3 google: {
4 /**
5 * enable preconnect link injection
6 * <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
7 * default: true
8 */
9 preconnect: false,
10
11 /**
12 * allow preconnect to be customized
13 * default: 'https://fonts.gstatic.com'
14 */
15 preconnectUrl: 'https://fonts.gstatic.com',
16
17 /**
18 * customizes the base URL for the font request
19 * default: 'https://fonts.googleapis.com/css2'
20 */
21 fontBaseUrl: 'https://fonts.googleapis.com/css2',
22
23 /**
24 * values: auto, block, swap(default), fallback, optional
25 * default: 'swap'
26 */
27 display: 'block',
28
29 /**
30 * define which characters to load
31 * default: undefined (load all characters)
32 */
33 text: 'ViteAwsom',
34
35 /**
36 * define where the font load tags should be inserted
37 * default: 'head-prepend'
38 * values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
39 */
40 injectTo: 'head-prepend',
41
42 /**
43 * Fonts families lists
44 */
45 families: [
46 // families can be either strings (only regular 400 will be loaded)
47 'Source Sans Pro',
48
49 // or objects
50 {
51 /**
52 * Family name (required)
53 */
54 name: 'Roboto',
55
56 /**
57 * Family styles
58 */
59 styles: 'ital,wght@0,400;1,200',
60
61 /**
62 * enable non-blocking renderer
63 * <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
64 * default: true
65 */
66 defer: true,
67 },
68 ],
69 },
70})Custom Fonts
Load custom fonts from files.
1Unfonts({ 2 // Custom fonts. 3 custom: { 4 /** 5 * Fonts families lists 6 */ 7 families: [{ 8 /** 9 * Name of the font family. 10 */ 11 name: 'Roboto', 12 /** 13 * Local name of the font. Used to add `src: local()` to `@font-rule`. 14 */ 15 local: 'Roboto', 16 /** 17 * Regex(es) of font files to import. The names of the files will 18 * predicate the `font-style` and `font-weight` values of the `@font-rule`'s. 19 */ 20 src: './src/assets/fonts/*.ttf', 21 22 /** 23 * This function allow you to transform the font object before it is used 24 * to generate the `@font-rule` and head tags. 25 */ 26 transform(font) { 27 if (font.basename === 'Roboto-Bold') { 28 // update the font weight 29 font.weight = 700 30 } 31 32 // we can also return null to skip the font 33 return font 34 } 35 }], 36 37 /** 38 * Defines the default `font-display` value used for the generated 39 * `@font-rule` classes. 40 */ 41 display: 'auto', 42 43 /** 44 * Using `<link rel="preload">` will trigger a request for the WebFont 45 * early in the critical rendering path, without having to wait for the 46 * CSSOM to be created. 47 */ 48 preload: true, 49 50 /** 51 * Using `<link rel="prefetch">` is intended for prefetching resources 52 * that will be used in the next navigation/page load 53 * (e.g. when you go to the next page) 54 * 55 * Note: this can not be used with `preload` 56 */ 57 prefetch: false, 58 59 /** 60 * define where the font load tags should be inserted 61 * default: 'head-prepend' 62 * values: 'head' | 'body' | 'head-prepend' | 'body-prepend' 63 */ 64 injectTo: 'head-prepend', 65 }, 66 67})
Fontsource
Load fonts from Fontsource packages.
Note You will need to install
@fontsource/<font>packages.
1Unfonts({ 2 // Fontsource API 3 fontsource: { 4 /** 5 * Fonts families lists 6 */ 7 families: [ 8 // families can be either strings (load default font set) 9 // Require the `@fontsource/abeezee` package to be installed. 10 'ABeeZee', 11 'Inter Variable', // Require the `@fontsource-variable/inter` package to be installed. 12 { 13 /** 14 * Name of the font family. 15 * Require the `@fontsource/roboto` package to be installed. 16 */ 17 name: 'Roboto', 18 /** 19 * Load only a subset of the font family. 20 */ 21 weights: [400, 700], 22 /** 23 * Restrict the font styles to load. 24 */ 25 styles: ['italic', 'normal'], 26 /** 27 * Use another font subset. 28 */ 29 subset: 'latin-ext', 30 }, 31 { 32 /** 33 * Name of the font family. 34 * Require the `@fontsource-variable/cabin` package to be installed. 35 */ 36 name: 'Cabin', 37 /** 38 * When using variable fonts, you can choose which axes to load. 39 */ 40 variable: { 41 wght: true, 42 slnt: true, 43 ital: true, 44 }, 45 }, 46 ], 47 }, 48})
Typescript Definitions
1{ 2 "compilerOptions": { 3 "types": ["unplugin-fonts/client"] 4 } 5}
or
1// declaration.d.ts 2/// <reference types="unplugin-fonts/client" />
Resources
No vulnerabilities found.
No security vulnerabilities found.