Foundation

Marbl Fonts

Self-hosted variable woff2 stack: Inter (body), Urbanist (display), Petrona (accent + italic). Latin subset only. ~167 KB total. Replaces every Google Fonts CDN reference across Marbl-owned and Marbl-built sites.

Proof: if you can read this without any request to fonts.googleapis.com or fonts.gstatic.com, the component is working correctly. Open DevTools Network panel and refresh to verify zero third-party font requests.

Body / UI

Inter

Body copy, UI labels, microcopy. Variable font, all weights from 100 to 900 in a single 48 KB woff2.

300 Light

The crowned one of the open hand.

400 Regular

The crowned one of the open hand.

500 Medium

The crowned one of the open hand.

600 Semibold

The crowned one of the open hand.

700 Bold

The crowned one of the open hand.

Display

Urbanist

Hero titles, section headings, display copy. Variable font, all weights 100-900 in a single 28 KB woff2.

400 Regular

Code is the new marble.

500 Medium

Code is the new marble.

600 Semibold

Code is the new marble.

700 Bold

Code is the new marble.

800 Extrabold

Code is the new marble.

Accent / Label Style

Petrona

Italic emphasis, Label Style accents, editorial pull-quotes. Two variable woff2 files: one normal axis (44 KB), one italic axis (47 KB).

700 Bold (roman)

From the marble of the world we shape what endures.

800 Extrabold (roman)

From the marble of the world we shape what endures.

400 Italic

From the marble of the world we shape what endures.

700 Italic

From the marble of the world we shape what endures.

800 Italic

From the marble of the world we shape what endures.

In context

Landing-style block

All three families together — display heading, body paragraph, italic accent line.

Build digital things that endure.

Marbl Codes is a UK-based digital, web, and AI consultancy. We work in long arcs — strategy, design, build, ship, support — alongside teams who care how their software behaves under load and over years.

Code is the new marble.

Proof of variable font

Continuous weight axis

A static font cannot render between-weights. If you see a smooth gradation below — including non-multiples of 100 — the variable font has loaded correctly from local origin.

100 — feather thin 250 — between thin and light 350 — between light and regular 450 — between regular and medium 550 — between medium and semibold 650 — between semibold and bold 800 — extrabold 900 — black
Tokens

CSS custom properties

Defined in marbl-fonts.css at :root level. Use these tokens in component styles — never literal font-family strings.

--marbl-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--marbl-font-display: 'Urbanist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--marbl-font-accent:  'Petrona', Georgia, 'Times New Roman', serif;
--marbl-font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;