unifont

Framework agnostic tools for accessing data from font CDNs and providers.

📖 Documentation · 🔍 Catalogue · ⚖️ Compare providers · 🧩 HTTP API

Every font CDN is reached a different way. Google returns a stylesheet you have to parse, Fontshare returns JSON with its own names for weights, and Adobe wants a project id. unifont is one layer over all of them: ask for a family, and get back weights, styles, subsets, unicode ranges and @font-face data in the same shape every time.

Installation

npm i unifont
pnpm add unifont
yarn add unifont

Getting started

This package is ESM-only.

import { createUnifont, providers } from 'unifont'

const unifont = await createUnifont([
  providers.google(),
  providers.fontshare(),
])

const availableFonts = await unifont.listFonts()
const properties = await unifont.getFontProperties('Poppins')
const { fonts, fallbacks } = await unifont.resolveFont('Poppins', {
  weights: ['400', '700'],
  subsets: ['latin'],
})

Providers are tried in order, and the first one that knows the family answers.

Getting started walks through it. The API reference has every option and signature.

Built-in providers

providers.google()
providers.bunny()
providers.fontshare()
providers.fontsource()
providers.googleicons()
providers.npm()
providers.adobe({ id: process.env.TYPEKIT_ID })

Providers covers what each one serves and the options it takes. You can also write your own.

In a browser or a web container, CORS blocks every provider API except npm, so unifont sends those requests through a proxy instead. See Browser and web containers.

[!WARNING] The default https://proxy.unifont.dev is experimental and not for production use. It's there so reproductions and playgrounds work in web containers like StackBlitz without anyone deploying anything first. It's best-effort, it may be rate-limited, and it may change or disappear without notice. For anything else, deploy proxy/ and point apiBase at it.

💻 Development

• Clone this repository
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

unifont.dev lives in docs/. It's a Nuxt app that runs on the built package, so run pnpm build before pnpm docs. Its prose is Markdown in docs/content, served through Comark Content. Everything else comes from unifont at request time.

License

Made with ❤️

Published under MIT License.