Font Support

Gymlium pre-loads a set of font families that cover Latin, Arabic, and CJK scripts. Your template references these fonts via CSS custom properties — you never need to load fonts yourself.

Available font families

Using font variables

In your template.css, set your preferred fonts using the platform variables:

:root {
  --font-heading: var(--font-sora), var(--font-noto-kufi), sans-serif;
  --font-body: var(--font-inter), var(--font-noto-kufi), sans-serif;
}

Then use them in your component styles:

.title {
  font-family: var(--font-heading);
  font-weight: 700;
}
 
.body {
  font-family: var(--font-body);
  font-weight: 400;
}

RTL font considerations

Arabic and Persian text uses Noto Kufi Arabic automatically when your font stack includes it as a fallback. The browser selects the correct font based on the characters being rendered.

/* This font stack works for both LTR and RTL */
.text {
  font-family: var(--font-inter), var(--font-noto-kufi), sans-serif;
}

When Inter encounters Arabic characters it can’t render, the browser falls back to Noto Kufi Arabic. No special handling needed.

Font weight mapping

Noto Kufi Arabic supports these weights:

Avoid using weights outside this range for body text, as Arabic text may render with inconsistent weight.

Typography best practices

Line height

Arabic text generally needs more line height than Latin text for comfortable reading:

.body {
  line-height: 1.6;
}
 
:global([dir="rtl"]) .body {
  line-height: 1.8;
}

Font size

Arabic characters are typically smaller than Latin characters at the same font size. Consider a slight size increase for RTL:

.paragraph {
  font-size: 1rem;
}
 
:global([dir="rtl"]) .paragraph {
  font-size: 1.05rem;
}

Letter spacing

Avoid letter-spacing on Arabic text. Arabic is a cursive script — adding space between letters breaks the visual flow:

.heading {
  letter-spacing: 0.05em;
}
 
:global([dir="rtl"]) .heading {
  letter-spacing: 0;
}