Universal Webfont loader - Unfonts - based on https://web.dev/optimize-webfont-loading/
Installations
npm install unplugin-fontsDeveloper
cssninjaStudio
Developer Guide
Module System
CommonJS, ESM
Min. Node Version
Typescript Support
Yes
Node Version
18.17.1
NPM Version
9.6.7
Statistics
343 Stars
99 Commits
26 Forks
2 Watching
8 Branches
11 Contributors
Updated on 27 Nov 2024
Bundle Size
245.45 kB
Minified
74.10 kB
Minified + Gzipped
Languages
TypeScript (98.83%)
Astro (0.68%)
JavaScript (0.49%)
Total Downloads
Cumulative downloads
Total Downloads
2,174,939
Last day
5.1%
10,344
Compared to previous day
Last week
-9%
54,600
Compared to previous week
Last month
13.6%
258,291
Compared to previous month
Last year
586.5%
1,898,391
Compared to previous year
Daily Downloads
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
1// vite.config.ts 2import { defineConfig } from 'vite' 3import { sveltekit } from '@sveltejs/kit/vite' 4import Unfonts from 'unplugin-fonts/vite' 5 6export default defineConfig({ 7 plugins: [ 8 sveltekit(), 9 Unfonts({ 10 /* options */ 11 }) 12 ] 13}) 14 15// +layout.svelte 16<script> 17 import { links } from 'unplugin-fonts/head' 18</script> 19 20<svelte:head> 21 {#each links as link} 22 <link {...link?.attrs || {}} /> 23 {/each} 24</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 * enable non-blocking renderer
11 * <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
12 * default: true
13 */
14 defer: true,
15
16 /**
17 * define where the font load tags should be inserted
18 * default: 'head-prepend'
19 * values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
20 */
21 injectTo: 'head-prepend',
22 },
23})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 * values: auto, block, swap(default), fallback, optional 13 * default: 'swap' 14 */ 15 display: 'block', 16 17 /** 18 * define which characters to load 19 * default: undefined (load all characters) 20 */ 21 text: 'ViteAwsom', 22 23 /** 24 * define where the font load tags should be inserted 25 * default: 'head-prepend' 26 * values: 'head' | 'body' | 'head-prepend' | 'body-prepend' 27 */ 28 injectTo: 'head-prepend', 29 30 /** 31 * Fonts families lists 32 */ 33 families: [ 34 // families can be either strings (only regular 400 will be loaded) 35 'Source Sans Pro', 36 37 // or objects 38 { 39 /** 40 * Family name (required) 41 */ 42 name: 'Roboto', 43 44 /** 45 * Family styles 46 */ 47 styles: 'ital,wght@0,400;1,200', 48 49 /** 50 * enable non-blocking renderer 51 * <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'"> 52 * default: true 53 */ 54 defer: true, 55 }, 56 ], 57 }, 58})
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.