Swap My Font

SwapMyFont started from a specific frustration: clients send fonts that can’t be licensed for web, and every existing resource for finding a substitute relies on a designer’s memory or a category list that was written without looking at the actual shapes. The brief was to make the right substitute findable, documentable, and provably close — in a single browser session, without uploading a file to a server.

The constraint was that the tool had to work for three very different users — a designer documenting a client deliverable, a developer comparing layout metrics before shipping, and a brand team verifying coverage before an international campaign — without asking any of them to understand font metrics directly.

How I framed the problem

The real problem was not

Principles for this project

• Proof over opinion: the output must be specific to the designer’s real text, not a category match or an aesthetic judgment.

• Local-first privacy: a licensed font file must never leave the browser — this is the only way a designer can use the tool without a legal question about the upload.

• Honest scope on licensing: surface guidance clearly, disclaim explicitly, and never imply the tool replaces a lawyer.

• Presets as entry points: the fourteen most-searched substitute queries (Helvetica, Futura, Gotham…) deserve their own shareable pages so search traffic lands on a real answer, not a search form.

I audited existing font substitute tools — curated lists, matcheri-style recommenders, and type-foundry comparison pages — and found a consistent gap: none combined a ranked results list with per-glyph visual proof for the designer’s own text. Most returned the same three or four recommendations for every input. A few had visual comparisons, but at the full-alphabet level, not on the string that actually matters.

• Search intent for font substitutes clusters tightly around specific named fonts —

• Licensing questions appear in almost every forum thread about font substitutes, but no tool surfaced the licence type next to the recommendation — designers were expected to look it up separately, which most did not.

• Developer use cases (layout stability, x-height matching) and designer use cases (glyph fidelity, style match) pointed to different primary metrics, but both were served by the same ranked output — the order of the list just reads differently depending on your goal.

I explored three output formats for the comparison: a side-by-side rendered specimen (easy to read, hard to quantify), a per-glyph overlay with difference highlighting (precise but visually dense), and a scored list with glyph indicators (scannable, shareable, and still honest about where the match breaks down). The scored list with glyph proof won — it could hold the result for someone who needs a quick answer and also carry the evidence for someone who needs to defend their choice.

The metrics — contour similarity, width ratio, x-height ratio, and ink density — were chosen because they predict the two things that actually fail in a bad substitute: the overall character of a word set in the font, and whether body-copy reflowing breaks a design. Weight and style matching sit on top of those structural metrics, not instead of them.

The shipped tool is a single-page experience: enter or upload a reference font, type a sample string, and receive a ranked list of Google Font substitutes with per-glyph proof, coverage warnings for missing characters, and plain-language licence badges. Font files uploaded by the designer are processed locally in the browser — nothing is sent to a server. Google Font references load from Google’s CDN.

Alongside the main tool, fourteen preset pages cover the most commonly searched substitutes — Helvetica, Futura, Gotham, Proxima Nova, Avenir, Inter, Poppins, and eight others — each with pre-loaded results and a shareable URL. A methodology page explains the four metrics and why they were chosen, making the ranking logic transparent to anyone who wants to understand or critique it.

Every layer — the matching algorithm, the interface, the preset content, and the methodology — was designed and built by me alone. The disclaimer is intentionally prominent: licence guidance is a starting point, not a legal opinion, and the tool is explicit about that on every result.