unplugin-fonts
Advanced tools
㊗️ Universal Webfont loader
Load fonts from any provider and use them in your project, whatever the framework you use.
This module takes care of loading the font files and generating the font-face rules. By default it preloads the font files and uses the swap strategy, but you can customize this behavior.
Currently supported providers:
npm i --save-dev unplugin-fonts # pnpm add -D unplugin-fonts
// vite.config.ts
import Unfonts from 'unplugin-fonts/vite'
export default defineConfig({
plugins: [
Unfonts({ /* options */ }),
],
})
Example: examples/vite
Warning
Not implemented yet
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-fonts/webpack')({ /* options */ })
]
}
// nuxt.config.js
export default {
modules: [
['unplugin-fonts/nuxt'],
],
unfonts: {
/* options */
}
}
Example: examples/nuxt
// vite.config.ts
import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import Unfonts from 'unplugin-fonts/vite'
export default defineConfig({
plugins: [
sveltekit(),
Unfonts({
/* options */
})
]
})
Example: examples/sveltekit
// astro.config.js
import { defineConfig } from 'astro/config'
import Unfonts from 'unplugin-fonts/astro'
export default defineConfig({
integrations: [
Unfonts({
/* options */
})
]
})
---
// src/pages/index.astro
import Unfont from 'unplugin-fonts/astro/component.astro';
---
<html>
<head>
<Unfont />
</head>
<body>
<!-- ... -->
</body>
</html>
Example: examples/astro
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'
@font-rules CSSNote
Required if using custom or fontsource providers
import 'unfonts.css'
Load fonts from Typekit.
Unfonts({
// Typekit API
typekit: {
/**
* Typekit project id
*/
id: '<projectId>',
/**
* enable non-blocking renderer
* <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
* default: true
*/
defer: true,
/**
* define where the font load tags should be inserted
* default: 'head-prepend'
* values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
*/
injectTo: 'head-prepend',
},
})
Load fonts from Google Fonts.
Unfonts({
// Google Fonts API V2
google: {
/**
* enable preconnect link injection
* <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
* default: true
*/
preconnect: false,
/**
* values: auto, block, swap(default), fallback, optional
* default: 'swap'
*/
display: 'block',
/**
* define which characters to load
* default: undefined (load all characters)
*/
text: 'ViteAwsom',
/**
* define where the font load tags should be inserted
* default: 'head-prepend'
* values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
*/
injectTo: 'head-prepend',
/**
* Fonts families lists
*/
families: [
// families can be either strings (only regular 400 will be loaded)
'Source Sans Pro',
// or objects
{
/**
* Family name (required)
*/
name: 'Roboto',
/**
* Family styles
*/
styles: 'ital,wght@0,400;1,200',
/**
* enable non-blocking renderer
* <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
* default: true
*/
defer: true,
},
],
},
})
Load custom fonts from files.
Unfonts({
// Custom fonts.
custom: {
/**
* Fonts families lists
*/
families: [{
/**
* Name of the font family.
*/
name: 'Roboto',
/**
* Local name of the font. Used to add `src: local()` to `@font-rule`.
*/
local: 'Roboto',
/**
* Regex(es) of font files to import. The names of the files will
* predicate the `font-style` and `font-weight` values of the `@font-rule`'s.
*/
src: './src/assets/fonts/*.ttf',
/**
* This function allow you to transform the font object before it is used
* to generate the `@font-rule` and head tags.
*/
transform(font) {
if (font.basename === 'Roboto-Bold') {
// update the font weight
font.weight = 700
}
// we can also return null to skip the font
return font
}
}],
/**
* Defines the default `font-display` value used for the generated
* `@font-rule` classes.
*/
display: 'auto',
/**
* Using `<link rel="preload">` will trigger a request for the WebFont
* early in the critical rendering path, without having to wait for the
* CSSOM to be created.
*/
preload: true,
/**
* Using `<link rel="prefetch">` is intended for prefetching resources
* that will be used in the next navigation/page load
* (e.g. when you go to the next page)
*
* Note: this can not be used with `preload`
*/
prefetch: false,
/**
* define where the font load tags should be inserted
* default: 'head-prepend'
* values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
*/
injectTo: 'head-prepend',
},
})
Load fonts from Fontsource packages.
Note You will need to install
@fontsource/<font>packages.
Unfonts({
// Fontsource API
fontsource: {
/**
* Fonts families lists
*/
families: [
// families can be either strings (load default font set)
// Require the `@fontsource/abeezee` package to be installed.
'ABeeZee',
{
/**
* Name of the font family.
* Require the `@fontsource/roboto` package to be installed.
*/
name: 'Roboto',
/**
* Load only a subset of the font family.
*/
weights: [400, 700],
/**
* Restrict the font styles to load.
*/
styles: ['italic', 'normal'],
/**
* Use another font subset.
*/
subset: 'latin-ext',
},
{
/**
* Name of the font family.
* Require the `@fontsource/cabin` package to be installed.
*/
name: 'Cabin',
/**
* Instead of using weights/styles, we can use variables fonts.
*/
variables: ['variable-full', 'variable-full-italic'],
/**
* Use another font subset.
*/
subset: 'latin-ext',
},
],
},
})
{
"compilerOptions": {
"types": ["unplugin-fonts/client"]
}
}
FAQs
Universal Webfont loader
We found that unplugin-fonts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.