connect-fonts

2.1.5 verified Sat Apr 25 auth: no javascript maintenance

Connect/Express middleware for serving web fonts with browser-specific @font-face CSS. Version 2.1.5 is the latest stable release. It allows serving fonts from your own domain instead of relying on external CDNs like Google Fonts, reducing latency. Font packs are installed separately (e.g., connect-fonts-opensans), and the middleware generates CSS tailored to the user's user-agent. Supports locale-optimized subsets, CORS headers, caching, and programmatic CSS generation for build steps. Compared to alternatives, it provides full control over font delivery and is ideal for performance-conscious Express apps.

Common errors

error Error: Cannot find module 'connect-fonts-opensans' ↓

cause Missing font pack dependency.

fix

npm install connect-fonts-opensans

error TypeError: fontMiddleware is not a function ↓

cause Calling the default export directly instead of calling .setup().

fix

Use fontMiddleware.setup({ ... }) instead of fontMiddleware({ ... }).

error Cannot read property 'generate_css' of undefined ↓

cause generate_css is called on the default export, not the setup return value.

fix

const mw = fontMiddleware.setup(...); mw.generate_css(...);

Warnings

deprecated connect-fonts is no longer actively maintained; last release 2018. ↓

fix Consider alternatives like Express.js built-in static or CDN-hosted fonts.

gotcha Middleware must be mounted before routes that serve HTML referencing fonts.css. ↓

fix Place app.use(fontMiddleware.setup(...)) before your route handlers.

gotcha Font packs are separate npm packages; missing pack results in no fonts served. ↓

fix Install required pack, e.g., npm install connect-fonts-opensans and require() it.

gotcha Setting ua option to 'all' serves all font formats (woff, woff2, etc.) to all browsers, increasing bandwidth. ↓

fix Omit ua or set to specific user-agent string to send only supported formats.

Install

npm install connect-fonts

yarn add connect-fonts

pnpm add connect-fonts

Imports

default

wrong

import fontMiddleware from 'connect-fonts';

correct

const fontMiddleware = require('connect-fonts');

Package is CJS-only; ESM import not supported.

setup

wrong

fontMiddleware({ fonts: [...] })

correct

fontMiddleware.setup({ fonts: [require('connect-fonts-opensans')] })

setup() is a method on the default export, not the default itself.

generate_css

wrong

fontMiddleware.generate_css(ua, lang, fonts, callback);

correct

const middleware = fontMiddleware.setup({...}); middleware.generate_css(ua, lang, fonts, callback);

generate_css is an instance method returned by setup().

Quickstart

Express server serving Open Sans font via connect-fonts middleware.

const express = require('express');
const fontMiddleware = require('connect-fonts');
const opensans = require('connect-fonts-opensans');

const app = express();
const port = process.env.PORT || 3000;

app.use(fontMiddleware.setup({
  fonts: [opensans],
  allow_origin: 'https://example.com',
  ua: 'all',
  maxage: 180 * 24 * 60 * 60 * 1000 // 180 days
}));

app.get('/', (req, res) => {
  res.send('<link href="/opensans-regular/fonts.css" rel="stylesheet" /><style>body { font-family: "Open Sans", sans-serif; }</style><h1>Hello!</h1>');
});

app.listen(port, () => console.log(`Server on port ${port}`));