rollup-plugin-bundle-fonts
The font directory is not cleared between runs. The plugin will only download fonts if they don't already exist in the target folder.
Requirements
This plugin requires an LTS Node version (v16.0.0+) and Rollup v3.0.0+.
Install
Using npm:
npm install rollup-plugin-bundle-fonts --save-dev
Usage
Create a rollup.config.js
configuration file and import the plugin. The example below will place fonts in the dist/fonts
folder relative to the project directory:
import bundleFonts from 'rollup-plugin-bundle-fonts';
export default {
input: 'src/index.ts',
output: {
file: 'dist/bundle.js',
format: 'es'
},
plugins: [
bundleFonts({
fontTargetDir: ['dist/fonts'],
cssBundleDir: ['dist']
})
]
};
Then call rollup
either via the CLI or the API.
Options
fontTargetDir
(required)
Type: string
This is the directory where all of the fonts will be downloaded to.
cssBundleDir
(required)
Type: string
This options tells this plugin where the final bundled css file will be located.
Since css url()
function calls are relative to the
css file rather than the site root directory,
this directory is required so that the plugin
can automatically update the url()
calls to have a relative path from the css file directory
to the font directory.
fontExtensions
Type: string[]
Default: ['.woff', '.woff2', '.ttf']
exclude
Type: string
| string[]
Default: null
A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
include
Type: string
| string[]
Default: ['**/*.css']
A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default only .css
files are targeted.