Font Blend

About

About Font Blend

Font Blend is a free typography playground. Discover fonts, build pairings, test type scales, check contrast, and export design tokens without an account. The site is static, the fonts are open source, and the tools run entirely in your browser.

What Font Blend Is

Font Blend is a free typography playground. The product is a set of small browser tools: a font catalog, a pairing catalog, a playground for testing two fonts side by side, a type scale calculator, a fluid type tool, a contrast checker, a gradient generator, a variable font tester, a font inspector for local files, and a brand kit exporter. No account is required for any of them. No database holds your data.

The fonts in the catalog are open-source families from Google Fonts, licensed under the SIL Open Font License or the Apache 2.0 license. Font Blend links to each font's source page. It does not redistribute font binaries.

Why It Exists

Designers and developers need a fast way to explore fonts, build pairings, test type scales, check contrast, and export design tokens. Most existing tools are either gated behind a signup, slow because they round-trip to a server, or tied to a single workflow. Font Blend puts all of those tools in one place, on a static site, with no account and no upload.

Every page is crawlable HTML. Every export (CSS, SCSS, Tailwind, JSON, Markdown, SVG) is generated in your browser and downloads as a file. The result is a toolkit you can open in a tab, use, and close without leaving a trace anywhere except your own machine.

How It Works

Font Blend is a 100% static site. The codebase is built with Next.js and exported to static HTML. There is no server-side runtime, no API in the request path, and no database. The only network requests are to Google Fonts (to render live previews) and, optionally, to an ad network when ads are enabled.

Every tool runs in your browser. Favorites live in localStorage under the fontblend:v1:* namespace. Tool state in the playground and brand kit is stored locally so the address bar keeps a clean URL; share links still encode a configuration when you need one. The favorites page lets you export, import, or clear that local data.

Font Licensing

Fonts in the Font Blend catalog come from Google Fonts. Each font has its own license, recorded per-font in the catalog. Most are SIL Open Font License 1.1; a small number are Apache 2.0. The SIL Open Font License and the Apache 2.0 license both permit free commercial use, modification, and redistribution with conditions.

Font Blend does not redistribute font binaries. It links to each font's Google Fonts specimen page and loads the live font on demand from fonts.googleapis.com when a preview is shown. Always check the license on the font's source page before publishing it in your own project.

How to Suggest a Font or Pairing

Suggestions are welcome. Email [email protected] or open an issue on GitHub. Please include the font name, its license, and a short reason for the addition or change.

How the Project Is Supported

Font Blend is supported by optional advertising (Google AdSense, when enabled) and by reader contributions on Buy me a coffee. The core tools remain free whether or not ads display. Ads are lazy-loaded below the fold, and the privacy page discloses what changes when ads are on.

What You Can Do Here

Eight tools plus three resource libraries. All free, all static, all running in your browser.

Need to know how the site handles your data? Read the privacy statement or the terms of use. For accessibility commitments, see the accessibility statement.