{"id":18243,"library":"connect-fonts","title":"connect-fonts","description":"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.","status":"maintenance","version":"2.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/shane-tomlinson/connect-fonts","tags":["javascript","font","font-face","CSS","webfont","typography"],"install":[{"cmd":"npm install connect-fonts","lang":"bash","label":"npm"},{"cmd":"yarn add connect-fonts","lang":"bash","label":"yarn"},{"cmd":"pnpm add connect-fonts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Uses Connect middleware signature (req, res, next); works with Express.","package":"connect","optional":false},{"reason":"Used internally for async flow control (e.g., parallel font processing).","package":"async","optional":false}],"imports":[{"note":"Package is CJS-only; ESM import not supported.","wrong":"import fontMiddleware from 'connect-fonts';","symbol":"default","correct":"const fontMiddleware = require('connect-fonts');"},{"note":"setup() is a method on the default export, not the default itself.","wrong":"fontMiddleware({ fonts: [...] })","symbol":"setup","correct":"fontMiddleware.setup({ fonts: [require('connect-fonts-opensans')] })"},{"note":"generate_css is an instance method returned by setup().","wrong":"fontMiddleware.generate_css(ua, lang, fonts, callback);","symbol":"generate_css","correct":"const middleware = fontMiddleware.setup({...}); middleware.generate_css(ua, lang, fonts, callback);"}],"quickstart":{"code":"const express = require('express');\nconst fontMiddleware = require('connect-fonts');\nconst opensans = require('connect-fonts-opensans');\n\nconst app = express();\nconst port = process.env.PORT || 3000;\n\napp.use(fontMiddleware.setup({\n  fonts: [opensans],\n  allow_origin: 'https://example.com',\n  ua: 'all',\n  maxage: 180 * 24 * 60 * 60 * 1000 // 180 days\n}));\n\napp.get('/', (req, res) => {\n  res.send('<link href=\"/opensans-regular/fonts.css\" rel=\"stylesheet\" /><style>body { font-family: \"Open Sans\", sans-serif; }</style><h1>Hello!</h1>');\n});\n\napp.listen(port, () => console.log(`Server on port ${port}`));","lang":"javascript","description":"Express server serving Open Sans font via connect-fonts middleware."},"warnings":[{"fix":"Consider alternatives like Express.js built-in static or CDN-hosted fonts.","message":"connect-fonts is no longer actively maintained; last release 2018.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Place app.use(fontMiddleware.setup(...)) before your route handlers.","message":"Middleware must be mounted before routes that serve HTML referencing fonts.css.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install required pack, e.g., npm install connect-fonts-opensans and require() it.","message":"Font packs are separate npm packages; missing pack results in no fonts served.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Omit ua or set to specific user-agent string to send only supported formats.","message":"Setting ua option to 'all' serves all font formats (woff, woff2, etc.) to all browsers, increasing bandwidth.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install connect-fonts-opensans","cause":"Missing font pack dependency.","error":"Error: Cannot find module 'connect-fonts-opensans'"},{"fix":"Use fontMiddleware.setup({ ... }) instead of fontMiddleware({ ... }).","cause":"Calling the default export directly instead of calling .setup().","error":"TypeError: fontMiddleware is not a function"},{"fix":"const mw = fontMiddleware.setup(...); mw.generate_css(...);","cause":"generate_css is called on the default export, not the setup return value.","error":"Cannot read property 'generate_css' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}