rollup-plugin-bundle-fonts

1.2.1 verified Mon Apr 27 auth: no javascript

A Rollup plugin that downloads HTTPS fonts referenced in CSS `url()` functions and copies them to a target directory, updating the URLs to relative paths. Current version 1.2.1, compatible with Rollup 3.0+ and Node.js LTS v16+. Unlike generic asset plugins, it specifically handles font downloading with optional download delays, include/exclude patterns, and automatic URL rewriting based on CSS bundle location. Does not clear the font directory between runs, only downloads missing fonts.

Common errors

error Cannot find module 'rollup-plugin-bundle-fonts' ↓

cause The plugin is not installed or is installed as devDependency but missing from node_modules.

fix

Run 'npm install rollup-plugin-bundle-fonts --save-dev' and ensure node_modules exists.

error TypeError: bundleFonts is not a function ↓

cause Using named import instead of default import.

fix

Use 'import bundleFonts from 'rollup-plugin-bundle-fonts'' (without curly braces).

Warnings

gotcha fontTargetDir and cssBundleDir are required but not validated at build time; missing them causes runtime errors. ↓

fix Always provide both fontTargetDir and cssBundleDir options.

gotcha The plugin only downloads fonts that are missing in fontTargetDir; existing files are not overwritten. ↓

fix Manually delete the font directory between builds if you need fresh downloads.

gotcha Delay option is in microseconds, not milliseconds. A typical delay of 100 means 0.1 ms. ↓

fix To add 1 second delay, set delay to 1000000.

Install

npm install rollup-plugin-bundle-fonts

yarn add rollup-plugin-bundle-fonts

pnpm add rollup-plugin-bundle-fonts

Imports

default

wrong

const bundleFonts = require('rollup-plugin-bundle-fonts')

correct

import bundleFonts from 'rollup-plugin-bundle-fonts'

Default export. ESM-only; CommonJS require will fail. Use import.

bundleFonts

wrong

import { bundleFonts } from 'rollup-plugin-bundle-fonts'

correct

import bundleFonts from 'rollup-plugin-bundle-fonts'

Do not use named import. The package exports a default function.

Quickstart

Basic Rollup config using bundleFonts plugin with required options fontTargetDir and cssBundleDir, plus optional delay.

import bundleFonts from 'rollup-plugin-bundle-fonts';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  plugins: [
    bundleFonts({
      fontTargetDir: 'dist/fonts',
      cssBundleDir: 'dist',
      delay: 100
    })
  ]
};