The font family check: why a one font family website reads as designed
Anticode holds every page to one font family, or at most one deliberate pairing. The Critic checks the families named in a page's styles and fails at three or more; the design gate counts the families a page loads from Google Fonts and refuses to publish at three. Anticode's seven design systems each use a single family, so the check mostly matters when something else adds fonts.
Why fewer typefaces look more designed
Every typeface has a voice. One family, used at a few sizes and weights, gives a page one voice with emphasis; two can work when they're chosen to contrast, one for headings and one for text; three almost always sounds like a committee. Generated sites drift towards extra families because each section is produced on its own: a display face for the hero, a different one for cards, a third for a quote. Each extra family is also another download before the text settles, so a one font family website tends to load faster as well as read better. The font pairing guide covers when a second family earns its place.
How the Critic counts
The Critic reads the page's style blocks and collects the font names written in quotes in font, font-family and font custom-property declarations. It counts each distinct name and passes the page if there are two or fewer. The detail line lists the families it found, so a failure tells you exactly which three or more were named.
Two details matter. It takes the first quoted name in each declaration, so a fallback list such as a named family followed by system-ui, sans-serif counts once. And names written without quotes aren't counted, which means the check is a guide to what a stylesheet asks for, not a complete inventory.
How the design gate counts
The gate looks at a different signal: the Google Fonts stylesheet links in the page. It reads every family requested in those links and refuses to publish when there are more than two, with a message saying how many families the page loads and to use one or a pairing. This is the rule that bites on model-written apps, which can link fonts themselves; the gate is applied to app builds and they're repaired against it before you see them.
| Critic | Design gate | |
|---|---|---|
| Reads | Font names quoted in the page's styles | Families requested from Google Fonts |
| Fails at | Three or more names | Three or more families |
| Effect | A cross in the Report tab, listing the names | Publishing refused |
| Doesn't see | Unquoted names, later names in a fallback list | Fonts loaded from anywhere else |
A separate gate rule, sans-serif type only, refuses serif fonts and serif fallbacks; it's described on the serif fallback check page.
How the design systems keep to one
Each of the seven systems loads one family from Google Fonts as a variable font with a range of weights, and falls back to the device's own sans-serif. Hierarchy comes from size, weight and spacing within that family:
- Luxury sets its headlines at weight 300 in Jost and sets navigation in small, widely spaced uppercase, without a second face.
- Brutalist loads Archivo with its width axis, so condensed headlines and normal body text come from the same family.
- Editorial drops section headings to a lighter weight of Geist than the hero, so one headline leads.
- Swiss uses Inter Tight's close spacing at a heavy weight for poster-like headlines.
Because the code editor doesn't keep added markup or CSS beyond text, section order and colour tokens, you can't add a font to a design-engine page there. The check on these pages is mostly a guarantee; on apps, it's a real guard.
Fixing a failure
- Read the detail to see which families were found.
- Pick the one that carries the brand, usually the headline face, and use it for everything.
- Rebuild hierarchy with weight and size: a heavier, larger headline, a regular body, a medium label.
- If you need contrast, keep a second family for body text only, and remove every other one.
- For an app, say so in a change request: "use one font for the whole app".
Limits
- Counting isn't judging. Two families that clash still pass, and one badly chosen family passes too.
- Overused faces are a separate check. A page in one family can still fail the overused fonts check if that family is one every generated site uses.
- Icons and logos in images aren't fonts, so they're not counted.
Questions people ask
How many fonts should a website use?
One family is enough for most sites, and two at most when they contrast clearly. Anticode's checks pass one or two and fail three.
Do bold and italic count as extra fonts?
No. Weights and styles of the same family are one family in both checks.
Can I choose a different font for my design-engine site?
The font comes with the design system. To change it, switch direction; each of the seven has its own family.
Why was my app refused for its fonts?
It requested three or more families from Google Fonts. Ask for one font throughout in a change request, then publish again.