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.

npm i unifont
pnpm add unifont
yarn add unifont

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.

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.

• 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.

Made with ❤️

Published under MIT License.