Fonts

Two scripts, three families. Manrope sets Latin and Cyrillic text, Thmanyah sets Arabic and every page with dir="rtl", JetBrains Mono sets code. The tokens switch automatically with the direction.

Families and tokens

--zg-fontUI text (LTR)
'Manrope', 'Thmanyah Sans', system-ui, sans-serifLatin and Cyrillic. Loaded from Google Fonts in dist/style.css.
Manrope, Google FontsSIL OFL 1.1Weights: 200 to 700
--zg-font-arUI text (RTL, Arabic)
'Thmanyah Sans', system-ui, sans-serifReplaces --zg-font automatically when dir="rtl".
Thmanyah, shipped in the packageFree incl. commercialWeights: 300, 400, 500, 700, 900 (mapped, see below)
--zg-font-ar-displayArabic display headlines
'Thmanyah Serif Display', 'Thmanyah Sans', serifOptional. For editorial headings and articles.
Thmanyah, shippedFree incl. commercialWeights: 300, 400, 500, 700
--zg-font-ar-textArabic reading text
'Thmanyah Serif Text', 'Thmanyah Sans', serifOptional. For long articles.
Thmanyah, shippedFree incl. commercialWeights: 300, 400, 500, 700
--zg-font-monoCode, numbers in tables
'JetBrains Mono', ui-monospace, monospaceUsed by Code, Kbd, codes and IDs.
JetBrains Mono, Google FontsSIL OFL 1.1Weights: 400, 500, 600

Specimen

Manrope

Latin, Cyrillic. LTR UI
300Umrah trip to Makkah and Madinah
400Umrah trip to Makkah and Madinah
500Umrah trip to Makkah and Madinah
600Umrah trip to Makkah and Madinah
700Umrah trip to Makkah and Madinah

Thmanyah Sans

Arabic. RTL UI
300رحلة العمرة إلى مكة المكرمة والمدينة
400رحلة العمرة إلى مكة المكرمة والمدينة
500رحلة العمرة إلى مكة المكرمة والمدينة
600رحلة العمرة إلى مكة المكرمة والمدينة
700رحلة العمرة إلى مكة المكرمة والمدينة
900رحلة العمرة إلى مكة المكرمة والمدينة

JetBrains Mono

Code and identifiers
400BK-2041 · SAR 18 400
500BK-2041 · SAR 18 400
600BK-2041 · SAR 18 400

Why Arabic looks lighter than before

Thmanyah is visually heavier than Manrope at the same weight and has no 600 face, so a 600 label used to fall back to Bold. The library now maps UI weights to the files with weight ranges in fonts.css, so a button label in Arabic is Regular and only real bold text (700 and up) is Medium or heavier.

font-weight: 200 to 300Thmanyah Sans LightLarge headings, big numbers
font-weight: 400 to 600Thmanyah Sans RegularBody text, labels, buttons, tabs, card titles
font-weight: 700Thmanyah Sans MediumBold emphasis (b, strong, 700)
font-weight: 800Thmanyah Sans BoldRare, strong emphasis
font-weight: 900Thmanyah Sans BlackDisplay numerals only

Setup and self-hosting

css
:root {
  --zg-font: 'Manrope', 'Thmanyah Sans', system-ui, sans-serif;
  --zg-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
[dir="rtl"] { --zg-font: var(--zg-font-ar); }

/* self-host: copy assets/fonts/thmanyah and point the URLs at your copy */
@font-face {
  font-family: 'Thmanyah Sans';
  font-weight: 400 600;               /* Regular covers 400 to 600 */
  src: url('/fonts/thmanyahsans-Regular.otf') format('opentype');
  font-display: swap;
}
  • Manrope and JetBrains Mono load from Google Fonts through @import in dist/style.css. For offline or strict-CSP deployments download them, self-host and remove that line.
  • Thmanyah files ship in @ziyarago/ui/assets/fonts/thmanyah. Bundlers (Vite, Nuxt, Next) resolve the URLs from style.css automatically.
  • Every face uses font-display: swap. The browser keeps the fallback stack until a file arrives.
  • Licenses are listed in THIRD_PARTY_NOTICES.md. Thmanyah is free for commercial use; check the foundry page before redistributing changed files.