gem-hunter
Language: JavaScript
A rollup plugin that downloads fonts referenced in css files and updates the url() links to relative links.
🍣 A Rollup plugin that downloads https fonts referenced by url() functions in your css files and places them in a specified target directory. The url() functions are then updated with relative url's that point to the target directory.
The font directory is not cleared between runs. The plugin will only download fonts if they don't already exist in the target folder.
This plugin requires an LTS Node version (v16.0.0+) and Rollup v3.0.0+.
Using npm:
npm install rollup-plugin-bundle-fonts --save-devCreate 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.
Type: string
This is the directory where all of the fonts will be downloaded to.
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.
Type: string[]
Default: ['.woff', '.woff2', '.ttf']
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.
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.
Type: number
Default: 0
Delay in microseconds between each fetch call when downloading multiple fonts.