Fontlog

Pairing playground

Put three fonts together, see them in a real layout, and copy a stack you can paste straight into a project — Fontsource installs, CSS variables, a Tailwind block, and fallback @font-face rules generated from each font’s real metrics so there’s no layout shift.

Northwind
Sign up

Building blocks

Ship your interface in half the time.

A couple of lines of body copy, long enough to show the reading colour and rhythm of the text face next to the headline. Numbers like 1,240 and 3.5× sit in here too.

Get startedRead the docs →
$ npm i @northwind/ui
+ @northwind/ui 2.4.0
added 1 package in 431ms
PlanSeatsPrice
Starter3$0
Team12$49
Business40$149

Heading: Bricolage Grotesque · Body: Recursive · Mono: Inconsolata

Copy the stack

Install
pnpm add @fontsource-variable/bricolage-grotesque @fontsource-variable/recursive @fontsource-variable/inconsolata
# npm install @fontsource-variable/bricolage-grotesque @fontsource-variable/recursive @fontsource-variable/inconsolata
Import once
import '@fontsource-variable/bricolage-grotesque';
import '@fontsource-variable/recursive';
import '@fontsource-variable/inconsolata';
CSS — zero-CLS fallback + variables
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local('Arial'), local('ArialMT');
  ascent-override: 88.2116%;
  descent-override: 25.6098%;
  line-gap-override: 0%;
  size-adjust: 105.4283%;
}

@font-face {
  font-family: "Recursive Fallback";
  src: local('Arial'), local('ArialMT');
  ascent-override: 83.0413%;
  descent-override: 21.853%;
  line-gap-override: 0%;
  size-adjust: 114.4009%;
}

@font-face {
  font-family: "Inconsolata Fallback";
  src: local('Courier New'), local('CourierNewPSMT');
  ascent-override: 103.0968%;
  descent-override: 22.8037%;
  size-adjust: 83.3198%;
}

:root {
  --font-heading: 'Bricolage Grotesque Variable', 'Bricolage Grotesque Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Recursive Variable', 'Recursive Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Inconsolata Variable', 'Inconsolata Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
}

The fallback @font-face values are computed from each font's real metrics, so swapping in the web font causes no layout shift.

Tailwind v4
@theme {
  --font-heading: 'Bricolage Grotesque Variable', 'Bricolage Grotesque Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Recursive Variable', 'Recursive Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Inconsolata Variable', 'Inconsolata Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
}

Generates font-heading / font-body / font-mono utilities.