gchq/CyberChef · error · OperationError

Error preparing fonts. (${err})

Error message

Error preparing fonts. (${err})

What it means

AddTextToImage dynamically imports four bundled bitmap-font assets (Roboto/RobotoSlab/RobotoMono/RobotoBlack .fnt + .png) via webpack eager imports. If any of these imports rejects, the operation throws 'Error preparing fonts.' This is a build/bundling/asset-loading problem, not a user-input problem.

Source

Thrown at src/core/operations/AddTextToImage.mjs:179

                fontsMap["Roboto Slab"] = fonts[3];
            });
            // Make Webpack load the png font images
            await Promise.all([
                import(
                    /* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/Roboto72White.png"
                ),
                import(
                    /* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoSlab72White.png"
                ),
                import(
                    /* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoMono72White.png"
                ),
                import(
                    /* webpackMode: "eager" */ "../../web/static/fonts/bmfonts/RobotoBlack72White.png"
                ),
            ]);
        } catch (err) {
            throw new OperationError(`Error preparing fonts. (${err})`);
        }

        let jimpFont;
        try {
            const font = fontsMap[fontFace];

            // LoadFont needs an absolute url, so append the font name to self.docURL
            jimpFont = await loadFont(self.docURL + "/" + font.default);

            jimpFont.pages.forEach(function (page) {
                if (page.bitmap) {
                    // Adjust the RGB values of the image pages to change the font colour.
                    const pageWidth = page.bitmap.width;
                    const pageHeight = page.bitmap.height;
                    for (let ix = 0; ix < pageWidth; ix++) {
                        for (let iy = 0; iy < pageHeight; iy++) {
                            const idx = (iy * pageWidth + ix) << 2;

View on GitHub (pinned to 4290ea7539)

Solutions

1. Ensure the font assets under src/web/static/fonts/bmfonts/ are present and included in the build bundle.
2. Verify the deployment serves the generated font chunks at the configured publicPath.
3. Run the official build (npm run build) which bundles these eagerly-imported assets.
4. If airgapped, confirm the chunks are local (not fetched from a remote CDN).

Example fix

// before: custom build drops bmfonts → import() rejects → 'Error preparing fonts.'
// after: keep src/web/static/fonts/bmfonts/* in the build inputs so the eager imports resolve

try {
  await addTextToImage(input, ...);
} catch (e) {
  if (/Error preparing fonts/.test(e.message)) {
    // build/deploy issue: ensure bmfonts assets are bundled and served
    throw new Error('Font assets failed to load — check the build/deployment of static/fonts/bmfonts');
  }
  throw e;
}

When it happens

Trigger: One or more of the eagerly-imported font modules fails to load: missing font files in the build output, a broken webpack chunk mapping, a CDN/path resolution failure, or an airgapped/offline environment where the chunk URL is unreachable.

Common situations: Custom build of CyberChef that excluded the font assets; deployment from a CDN where the .fnt/.png chunks 404; running in an environment where self.docURL / public path is misconfigured; webpack publicPath mismatch.

Related errors

• Error loading font. (${err})
• Error opening image. (${err})
• Error normalising image. (${err})
• Invalid file type.
• Error loading image. (${err})

AI-assisted analysis of gchq/CyberChef@4290ea7539 (2026-08-13). Data as JSON: /api/errors/f8303d142626b322. Report an issue: GitHub.