Open-Source Font Catalog

The Six Categories at a Glance

The catalog sorts every family into one of six structural categories, and that category is the fastest filter on the page. Each one signals a different job and a different voice, so knowing what the categories mean gets you to the right family faster than reading forty descriptions.

• Serif (9 families). Browse serifs, from Merriweather and Playfair Display to Lora and Fraunces. Serifs carry the editorial voice, the newsroom and the long-form blog, and they are where this catalog keeps its most expressive display faces.
• Sans-serif (21). Browse sans-serifs. The biggest group and the workhorse of the web, from Inter and Roboto to DM Sans and Space Grotesk. It splits into humanist faces with friendly curves, like Open Sans and Lato, geometric faces built on circles, like Montserrat and Poppins, and neutral grotesques like Inter and Work Sans that get out of the way.
• Slab (1). Browse slab serifs. A single family, Bitter, a sturdy serif with blocky squared-off strokes that holds up at small sizes and reads with a confident, grounded voice.
• Display (1). Browse display fonts. Bebas Neue, a condensed uppercase face built for posters, headlines, and sports media. It is a single voice, deliberately loud.
• Monospace (4). Browse monospace fonts. JetBrains Mono, Fira Code, Space Mono, and IBM Plex Mono, fixed-width faces for code, terminals, and technical branding.
• Handwriting (2). Browse handwriting fonts. Caveat and Satisfy, casual script faces for accents, social posts, and personal brands.

What a Font Card Shows

Each card in the grid is a working preview, not a thumbnail. It loads the real family from Google Fonts and sets the font name in that typeface, so what you see is exactly what you would get. Below the preview, four details do most of the deciding.

The weights badge counts how many weights the family ships with, from a single weight in Bebas Neue up to nine in Inter and Montserrat. The variable badge marks families with a variable version, and its tooltip lists the axes. The x-height row tells you whether the lowercase letters are tall relative to the caps: a high x-height like Inter's or Open Sans's keeps text legible at small sizes, while a low one like Raleway's or Cormorant Garamond's reads best large. The popularity score is a subjective 0 to 100 note on how often the family shows up in the pairings library, useful for sorting rather than for judging quality.

Tags and moods add searchable texture: typing editorial, technical, or friendly into the search box finds families by personality, not just by name. Every card links to a detail page with the full spec, including subsets, license, designer, and every pairing the family appears in.

Narrowing the Catalog

The filter bar sits above the grid and stays with you as you scroll. The category dropdown is the coarsest cut, useful when you already know you want a serif or a monospace. The variable only switch keeps families that ship a variable version, which is handy when file size or axis control matters. The search box matches font names, designers, descriptions, tags, moods, and use cases, so typing handwriting or luxury behaves like a filter of its own. The sort menu switches between Popular, Alphabetical, and Recently added.

Cards load twelve at a time to keep the page fast, with a Load more button for the rest. Your filters persist in the browser between visits, so the catalog opens where you left it. To share a filtered view, the page honors category, sort, q, and variable parameters in the URL on load and then strips them from the address bar.

Fonts by Job

Categories describe the letterforms. Jobs describe the project. These clusters are the fastest way to pick a single family for a specific need.

• Product UI and apps. Inter, Roboto, DM Sans, Manrope, and Plus Jakarta Sans all carry a calm, neutral voice with a generous x-height that survives dense dashboards and small button labels.
• Long-form reading. Merriweather, Lora, Source Serif 4, Spectral, Libre Baskerville, and Bitter are tuned for sustained reading on screens, with open counters and sturdy hairlines.
• Code and developer brands. JetBrains Mono, Fira Code, Space Mono, and Ubuntu bring the technical voice, whether you are styling a code block or a whole developer-tool brand.
• Headlines and branding. Playfair Display, Montserrat, Bebas Neue, Archivo, and Oswald are display-led families that carry a landing page hero or a brand wordmark on their own.
• Friendly and casual. Caveat, Satisfy, Nunito, Quicksand, and Rubik lean round and approachable, at home in education, consumer, and personal-brand projects.

Variable Fonts in the Catalog

26 of the 38 families here ship a variable version, which means one file contains a continuous range of styles instead of a pile of static weights. The card's variable badge tells you at a glance, and the detail page lists every axis with its minimum, maximum, and default value.

Some families go well beyond weight. Fraunces has a wght axis plus an opsz axis for optical sizing and a custom SOFT axis that rounds the letterforms from crisp to soft. Archivo adds a width axis that runs from 62 percent condensed to 125 percent extended. Playfair Display and Source Serif 4 both carry optical size axes, so the same family can serve a tiny caption and a huge headline. To drag those axes around and see the letters change in real time, the variable font tester is the place to go.

Static families are not second-class. Roboto, Bebas Neue, and the IBM Plex trio have been tuned and tested for years, and a static file is simpler to reason about. Pick variable when you want the range or the smaller payload; pick static when you want the certainty.

Licensing at a Glance

Every family in the catalog is open source, and almost all of them sit under the SIL Open Font License 1.1, which permits commercial use, modification, and redistribution with a few conditions. Three families differ: Roboto is Apache 2.0, and Ubuntu uses the Ubuntu Font Licence 1.0. Each font detail page links to the exact license text, so you can confirm before you ship. Font Blend does not redistribute font binaries. Families load on demand from the Google Fonts CDN, and the terms page explains how that works in plain language.

From Catalog to Production

A single font is the first decision, not the last. Once you have picked a family, the rest of the toolkit takes over. The pairings library shows the family set against a partner, the pairing generator builds new combinations from the same catalog, and the compare tool puts two families side by side on the same sample text. The typography playground tests the choice on a full layout with real copy, and the brand kit bundles the family with a palette, a type scale, and a pairing into exportable CSS and JSON tokens.

Frequently Asked Questions

Related Tools

Pick a family here, then pair it, test it, or fold it into a full brand system.