Architect layer
Design
The name, addresses, meta and appearance of this project. Saved settings are read at runtime — a change shows on the next page load, with no rebuild.
Fonts
Headings, body text and monospace — where the families come from and how they are connected.
Three roles, one decision each: headings, body text, and monospace. The set opens on the system font — it downloads nothing and reaches no third party.
Headings
H1 through H4. This is where a project gets its character.
Body text
Paragraphs, lists, captions — most of what a person actually reads.
Monospace
Code, identifiers, numbers in tables.
Takes whatever the device already has. Nothing is downloaded, nothing leaves the page, and text is visible in the very first frame.
Preview
The quick brown fox — Съешь ещё этих мягких булок 0123
The quick brown fox — Съешь ещё этих мягких булок 0123
The quick brown fox — Съешь ещё этих мягких булок 0123
About fonts: where they come from and how they are connected
Where they live. The families in this list come from Google Fonts (fonts.google.com), all under a free licence — OFL or Apache. The files themselves are NOT stored on your server: a visitor receives them from fonts.googleapis.com, whose cache is already warm on nearly every device.
How they are connected. Saving writes the family name and its stylesheet URL into DESIGN-CONFIG/design-config.json on your server. The application reads that file on every render and emits two things: a <link> to the stylesheet in <head>, and a CSS variable that the type primitive uses. A <link> rather than an @import on purpose — the browser sees a link immediately, while an @import inside <style> costs an extra network round-trip before the font is even requested. No rebuild is needed; the change shows on the next page load.
What this means in Europe. Connecting an external font hands the visitor IP address to Google servers. A German court has ruled that this alone breaches GDPR (LG München I, 3 O 17493/20). The system option avoids the question entirely: it never reaches outside. If you need both a custom font and that guarantee, the font files have to be hosted on your own server — that is a separate step, not a setting.
Alphabets are not a detail. A font without Cyrillic turns a Russian page into a row of rectangles, and the build will not warn you — the page renders perfectly, it is simply unreadable. Every entry states which alphabets it covers; check it against the languages you switched on.
Why the system font is first. It is the fastest possible answer: nothing to download, nothing to wait for, no third party involved. For most projects it is also the right one — a custom font earns its cost only when the brand actually depends on it.