FontFetch app icon
← All apps

From first font to finished brand guide

FontFetch

Pair a heading with a body, give them a palette and an icon set, and export a 17-page brand guide your client can keep — plus DESIGN.md and CSS variables. Built on 1,900+ open-licensed Google Fonts, previewed live in their real typeface.

14-day trialmacOS$29 one-time
Try free for 14 days See what it exports Buy 14-day trial · exports unlock with a license · buy once
FontFetch's Pairings workbench on the Colors tab: a column of color kits on the left — Muted Rainbow, Earth Shattered, Warm Sunset, and the heARTapps and Navy & Gold kits — and on the right the Poster board in Detailed mode set in Inter, with the style guide beneath it: swatches with hex values, the SF Symbols icon row, the WCAG 2.1 AA contrast audit with Nudge to AA, and the primary, accent and neutral color scales FontFetch's Pairings workbench on the Colors tab: a column of color kits on the left — Muted Rainbow, Earth Shattered, Warm Sunset, and the heARTapps and Navy & Gold kits — and on the right the Poster board in Detailed mode set in Inter, with the style guide beneath it: swatches with hex values, the SF Symbols icon row, the WCAG 2.1 AA contrast audit with Nudge to AA, and the primary, accent and neutral color scales
17 pagesa brand guide, exported as PDF
1,900+open-licensed Google Fonts, previewed live
Any sitedrop a link, get its fonts, colors and icons
Buy onceno subscription, no account

The deliverable

Then hand it over.

Save the pairing, the palette and the icons as a design scheme, and FontFetch writes the manual: cover, typography specimen, color world, color-in-use with contrast checks, icon usage, components, layouts for web, dashboard and mobile, and design tokens. Seventeen pages, in the rhythm of a printed branding manual.

Export it as a PDF for the client, DESIGN.md for the repository, and — for whoever writes the code — CSS custom properties, design tokens in DTCG format — the shape Style Dictionary reads — or a tailwind.config.js. That last set isn't a reference to copy from; it drops straight into a project. And every one of them is a file you own — no account to keep paying for, no link to rot, no vendor who can take it away.

The 14-day trial is for building — pair, tune, and preview every page of the guide on screen. Exports unlock with a license: the PDFs, DESIGN.md, the CSS, board images and the web specimen.

Page 1 of 17 of a brand guide exported by FontFetch
Page 2 of 17 of a brand guide exported by FontFetch
Page 3 of 17 of a brand guide exported by FontFetch
Page 4 of 17 of a brand guide exported by FontFetch
Page 5 of 17 of a brand guide exported by FontFetch
Page 6 of 17 of a brand guide exported by FontFetch
Page 7 of 17 of a brand guide exported by FontFetch
Page 8 of 17 of a brand guide exported by FontFetch
Page 9 of 17 of a brand guide exported by FontFetch
Page 10 of 17 of a brand guide exported by FontFetch
Page 11 of 17 of a brand guide exported by FontFetch
Page 12 of 17 of a brand guide exported by FontFetch
Page 13 of 17 of a brand guide exported by FontFetch
Page 14 of 17 of a brand guide exported by FontFetch
Page 15 of 17 of a brand guide exported by FontFetch
Page 16 of 17 of a brand guide exported by FontFetch
Page 17 of 17 of a brand guide exported by FontFetch
17 pages Swipe or scroll to page through

Accessibility

Passes before anyone asks.

The audit travels with the guide. The six combinations a scheme actually puts in front of people — text on the background, text on a surface, a link, button text on its fill, the accent, the border — are audited against WCAG 2.1 AA: 4.5 : 1 for text, 3 : 1 for large text and UI, the bar EN 301 549 and Germany's BFSG set. Each row shows its ratio. A failing one gets a one-click Nudge to AA, which shifts only that color's brightness to the first step that passes and writes it back into the scheme — so the swatches, the guide's contrast table, DESIGN.md and the PDF all carry the fixed value, and what you hand over passes before anyone asks.

FontFetch's contrast audit for the Navy & Gold scheme — Contrast · WCAG 2.1 AA, six rows from text on background at 12.8 : 1 down to border on background at 1.6 : 1, the failing row with a Nudge to AA button FontFetch's contrast audit for the Navy & Gold scheme — Contrast · WCAG 2.1 AA, six rows from text on background at 12.8 : 1 down to border on background at 1.6 : 1, the failing row with a Nudge to AA button

The workbench

Pair it, and see it in place.

Put a heading font and a body font together and watch them work — as a landing page, an editorial spread, a dashboard, a poster. Add one of 20 proven palettes, or build your own on a color wheel with nine harmonies. The type scale, the swatches and the icon set stay visible the whole time, because that's the thing you're actually deciding.

FontFetch's workbench — Cormorant Garamond paired with Inter on a Navy & Gold palette, with the type scale, swatches and icon row in view FontFetch's workbench — Cormorant Garamond paired with Inter on a Navy & Gold palette, with the type scale, swatches and icon row in view

The color wheel

Color you don't have to guess at.

Pick a base color and a harmony — analogous, triad, split complementary, nine in all — and FontFetch turns them into the six roles a design system actually needs: background, text, primary, accent, surface and border. Each harmony shows you what it means before you choose it, and once you have, you can drag any handle on the wheel and the harmony holds.

Then it grades its own work. Every role is checked for WCAG contrast against the ground you picked and labeled with its real ratio — so you find out the palette passes before it reaches the guide, rather than after somebody else's accessibility audit. Save it as a kit, or open it straight in Pairings with your type.

FontFetch's color wheel — a base color with its handles, the nine harmony rules each shown as a mini-wheel, the resulting five swatches with hex values, and every role listed with its WCAG contrast ratio FontFetch's color wheel — a base color with its handles, the nine harmony rules each shown as a mini-wheel, the resulting five swatches with hex values, and every role listed with its WCAG contrast ratio

The party trick

Take the recipe, not the cake.

Drop in any website's address and FontFetch reports back what it's made of: the fonts with their weights and roles — headings, body, nav, buttons — Google alternatives for the ones you can't use, the palette read off the rendered page, the icon set, and a contrast audit of the combinations the site actually uses. Open the whole thing in the workbench as a starting point.

It reads the page live, so if a site won't load — a login wall, or it blocks automated requests — the report says partial and shows the declared fonts only.

FontFetch's site report for heartapps.app — the fonts it found with their roles, Google stand-ins, the palette read off the page with hex values, and the icon sets FontFetch's site report for heartapps.app — the fonts it found with their roles, Google stand-ins, the palette read off the page with hex values, and the icon sets

The foundation

Every Google Font, previewed properly.

1,900+ families, each rendered in its own typeface — Thin to Black, roman and italic, downloaded on demand and preview-only until you say otherwise. Type your own words to try one on. Variable fonts get a slider per axis. It's the Font Book you'd actually enjoy browsing — and the rest of this page is the part Font Book forgot.

FontFetch showing a complete family — every weight from Thin to Black, roman and italic, each previewed live in its own style FontFetch showing a complete family — every weight from Thin to Black, roman and italic, each previewed live in its own style

The basics

Install in a click. Uninstall just as easily.

Hit Install and FontFetch copies the family into ~/Library/Fonts — the very place Font Book uses — so it's live in every app on your Mac within seconds. Changed your mind? Uninstall moves only those files to the Trash. Reversible, tidy, and entirely yours.

A one-click Install Google Font button in FontFetch, with a large live preview A one-click Install Google Font button in FontFetch, with a large live preview

The part Font Book forgot

Your type library, waiting on your next Mac.

~/Library/Fonts doesn't sync — so your carefully chosen fonts vanish the day you switch machines. FontFetch fixes that. Star favorites, group them into named collections, and export any set as a tiny .fontfetch file. Open it on a new Mac — or hand it to a teammate — and one click brings the whole set back. You can even export a collection as a ready-to-paste web specimen, embed code and all.

In the trial, the web specimen is the one export here that waits for a license. .fontfetch files are never gated — your collections travel with you from day one.

Exporting a shareable .fontfetch collection file from FontFetch Exporting a shareable .fontfetch collection file from FontFetch

From first font to finished guide, in three moves

01

Pick the type

Browse 1,900+ Google Fonts previewed in their real faces. Pair a heading with a body.

02

Build the system

Add a palette and an icon set. Check it as a landing page, a poster, a dashboard.

03

Export the guide

A 17-page PDF for the client, DESIGN.md for the repo, CSS for the build.

A real, native Mac app — free to build with for 14 days; exports unlock with a license — $29 once, yours on every Mac you own. The guides you export are files you keep, with no account to maintain and no subscription to cancel.

Native macOS app Buy once, no subscription No tracking, ever Made by one person

Try it for two weeks. Then it's yours.

Fourteen days to build with — pair, tune, and preview every page of the guide on screen. Exports unlock with a license: one payment, and it's yours on every Mac you own, with no subscription and no account.

Try it free
$29one-time
How pricing works

Get updates on FontFetch

Hear about new versions and fixes when they land — nothing else. A note now and then, no spam.

No spam, unsubscribe anytime. Privacy.