Typefaces
Four voices. Switzer and Erode carry the brand, Inter is product-UI only, and JetBrains Mono is reserved for data. All four are free — we link to the source rather than re-hosting the files, so you always get the current cut and the licence that comes with it.
The four faces
Each links straight to the foundry’s own download page.
Embedding them
For the web, use the hosted embeds rather than self-hosting the files — this is exactly what trailhq.com loads. Drop this in your <head>.
<link rel="preconnect" href="https://api.fontshare.com" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800&f[]=erode@400,500,600&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap">
Then set the four roles once, so nothing downstream has to remember which face does what.
--font-display: Switzer, ui-sans-serif, system-ui, sans-serif; /* super titles, subheads, buttons, body */ --font-editorial: Erode, Georgia, serif; /* titles, pull quotes, card headings */ --font-ui: Inter, ui-sans-serif, system-ui, sans-serif; /* product UI only */ --font-mono: "JetBrains Mono", ui-monospace, monospace; /* data, indices, coordinates */
The scale
Seven steps, each tied to one face. Sizes are the desktop values; the guide scales the two display steps down fluidly on narrow screens.
Rules that matter
JetBrains Mono is always uppercase with 0.12–0.16em tracking — it is a measurement voice, not a body voice. Inter never appears on a marketing surface, and Switzer never sets an editorial title where Erode is available. Coral is not a text colour on paper at body size; use #0A2333 and let coral carry the mark and the action.