Typography

Typeface: Cairo, everywhere

Cairo is a single dual-script family covering both Arabic and Latin — one font-family declaration serves both languages with no fallback-font mismatch between scripts.

--shumoul-font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;

Applied as --ifm-font-family-base and --ifm-heading-font-family in src/css/custom.css, so every element on the site — body text, headings, navbar, sidebar, buttons, code block captions — uses Cairo by default. Monospace code content intentionally uses a separate coding font (Cascadia Code / Fira Code / system monospace fallback) — code legibility depends on fixed-width glyphs Cairo doesn't provide.

Font loading strategy

Self-hosted, not loaded from Google Fonts' CDN at runtime — see static/fonts/cairo/*.woff2 and src/css/fonts.css. Three files (~81KB total) cover the full 400–800 weight range via Cairo's variable-font axis, split by Unicode subset exactly as Google's own font API splits them:

File	Subset	Weight range
cairo-arabic.woff2	Arabic script	400–800 (variable)
cairo-latin.woff2	Latin	400–800 (variable)
cairo-latin-ext.woff2	Latin Extended	400–800 (variable)

Every @font-face rule uses font-display: swap — text renders immediately in a fallback font and swaps to Cairo the moment it loads, so there is never a blank-text flash while fonts download. Self-hosting (rather than linking fonts.googleapis.com) removes an external DNS lookup + connection + redirect from the critical rendering path, which is the largest lever for Lighthouse performance on font-heavy pages.

Weights

Weight	Use
400 (regular)	Body text
600 (semibold)	Emphasis, buttons, nav items, table headers
700 (bold)	Headings

--ifm-font-weight-base: 400;
--ifm-font-weight-semibold: 600;
--ifm-font-weight-bold: 700;
--ifm-heading-font-weight: 700;

Responsive type scale

Headings use clamp() so font size scales smoothly between mobile and desktop instead of jumping at breakpoints:

--ifm-h1-font-size: clamp(1.875rem, 1.6rem + 1.2vw, 2.75rem);
--ifm-h2-font-size: clamp(1.5rem, 1.35rem + 0.7vw, 2rem);
--ifm-h3-font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
--ifm-line-height-base: 1.65;

Arabic-first rendering

• html[dir='rtl'] and html[lang^='ar'] both receive font-feature-settings: 'ss01' 1 (Cairo's stylistic set that improves Arabic letterform joining at small sizes).
• Cairo's Arabic glyphs are drawn at the same optical size as its Latin glyphs by design, so mixed Arabic/ English content (e.g. a bilingual field name like الاسم (Name)) never has one script look disproportionately larger or smaller than the other.

Where this is defined

src/css/fonts.css (@font-face declarations) and the typography block of src/css/custom.css's :root.