Arabic Web Fonts and Page Speed: What 29 Arab Brand Homepages Load

Arabic web fonts cost more bytes when the family carries full glyph coverage. In our crawl of 29 Arab brand homepages on 2 October 2026, the median font payload was 134 KB, and 6 of the 24 sites we could measure (25%) loaded 500 KB or more. Subsetting, fewer weights and one or two preloads fix most of that.

Key takeaways

• Median homepage font payload: 134 KB across 24 measurable Arab brand sites (VOCTOS crawl, 2 October 2026). Six loaded 503 to 665 KB.
• Glyph count drives weight. Google Fonts serves Noto Sans Arabic’s Arabic subset at 47.7 KB against 10.5 KB for its Latin subset, while Tajawal’s Arabic subset is 8.7 KB.
• 10 of 29 sites preloaded fonts, four of them 8 to 14 files. Three of those four shipped 647 KB or more.
• Fix order: subset with unicode-range, cut weights, set font-display, match fallback metrics, preload one or two files, check the licence.

Why are Arabic web fonts heavier than Latin fonts?

An Arabic font is heavier when it ships more glyphs. Most Arabic letters take up to four joining forms (isolated, initial, medial, final), and full-coverage families add ligatures, vowel marks and letters for Persian and Urdu. That pushes a complete Arabic subset past 1,300 glyphs, against roughly 210 to 260 in the same family’s Latin subset.

The W3C’s Arabic and Persian Layout Requirements describe that joining model; each form is a separate glyph. The table shows the cost in bytes: woff2 files served by the Google Fonts css2 API to desktop Chrome on 2 October 2026, glyphs counted with fontTools.

One caveat runs against the headline: Tajawal, Readex Pro and Cairo, at 190 to 393 glyphs, serve Arabic subsets smaller than their Latin ones.

Even the heaviest family here stays under 50 KB per weight once subset, so a 500 KB homepage is a file-count problem.

What 29 Arab brand homepages load

Across 29 Arab brand homepages we crawled on 2 October 2026, in Saudi Arabia, the UAE, Egypt, Qatar and Kuwait, fonts were rarely light. The median measurable payload was 134 KB, a quarter of sites passed 500 KB, ten preloaded font files, and two Egyptian brands served Arabic pages with a Latin-only main font.

The heavy pages also preload heavily. Four of the six sites over 500 KB preloaded 5 or more font files: a Saudi bank (9 files, 665 KB), a Saudi pharmacy chain (9, 647 KB), a UAE telecom (8, 659 KB) and a Saudi property developer (5, 503 KB). The 16-face page belongs to an Egyptian electronics retailer; another Egyptian retailer loaded 15 faces and a Qatari airline 14.

Most-used Arabic families: Tajawal, Noto Kufi Arabic, IBM Plex Sans Arabic, Cairo and Almarai, two sites each.

How we checked. The VOCTOS team loaded each brand’s Arabic homepage (or its default homepage) once in desktop Chrome, logged out, from a connection in Cairo, on 2 October 2026. After 3 to 4.5 seconds we read font files from Resource Timing, loaded faces from document.fonts and every font preload link. Limits: one page per site and a 4.5-second window. Third-party fonts without a Timing-Allow-Origin header report 0 bytes, so 5 sites have no byte figure, and cache can hide bytes. We collected no Core Web Vitals field data, so no LCP figures appear here. 8 of 37 homepages (22%) returned a bot challenge or blank page and are excluded.

If you want the same numbers for your own Arabic pages, have VOCTOS measure my site’s font payload.

Subsetting Arabic fonts with unicode-range

Split each family into an Arabic file and a Latin file, then declare both under one font-family name with unicode-range. The browser downloads a file only when the page contains a character inside its range. An Arabic page with English product codes fetches both files, and an English page fetches only the Latin one.

The block ranges come from Unicode’s Blocks.txt: Arabic, Arabic Supplement, Extended-A and B, and Presentation Forms-A and B. Add U+200C to U+200E (zero-width non-joiner, zero-width joiner, left-to-right mark), as Google’s own Arabic subset does. MDN documents the descriptor.

/* Arabic subset: one variable file covers weights 300 to 700 */
@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-arabic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

/* Latin subset of the same family, same name */
@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F,
                 U+20AC, U+2122, U+2212;
}

/* Metric-matched fallback: measure these values for YOUR font */
@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Segoe UI"), local("Tahoma");
  size-adjust: 104%;
  ascent-override: 95%;
  descent-override: 45%;
  line-gap-override: 0%;
}

html[lang|="ar"] body {
  font-family: "Brand Sans", "Brand Sans Fallback", system-ui, sans-serif;
}

Serve woff2 only; web.dev puts its compression about 30% ahead of WOFF. To cut files yourself, use fontTools’ pyftsubset with --layout-features='*', because dropping the shaping features stops letters joining. The effect is large. On the Noto Sans Arabic variable TTF from the google/fonts repository, these two commands took 825 KB down to a 155 KB Arabic file with the full weight axis. A Regular-only instance came out at 42 KB.

fonttools varLib.instancer NotoSansArabic[wdth,wght].ttf wdth=100 -o arabic-wght.ttf
pyftsubset arabic-wght.ttf \
  --unicodes="U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E" \
  --layout-features='*' --flavor=woff2 --output-file=brand-sans-arabic.woff2

Variable or static: how many weights does an Arabic site need?

Most Arabic sites need two weights, Regular and Bold, and rarely a third. A variable file pays off only from about the third weight. On Google Fonts, the full-axis Arabic file of Noto Kufi Arabic is 120.8 KB against 42.9 KB for Regular alone, so two static weights still come in lighter.

The Google Fonts css2 API, queried on 2 October 2026, serves Noto Kufi Arabic, Noto Sans Arabic, Cairo, Readex Pro and Noto Naskh Arabic as variable fonts. IBM Plex Sans Arabic (seven weights), Tajawal (seven) and Almarai (four) are static only. Using Arabic Regular and Bold sizes, the break-even is three weights for Noto Kufi Arabic, Cairo and Readex Pro, and four for Noto Sans Arabic.

web.dev’s font guide agrees that variable files help only sites using several weights. To find the weights a design really uses, set font-synthesis: none on staging and look for text in the wrong weight.

Which font-display value should an Arabic site use?

Use swap for the Arabic face that carries headings and body text, and pair it with a metric-matched fallback so the swap does not move the layout. Use optional when you would rather keep the system font than accept any shift. Never leave it unset, because Chromium and Firefox then hide text for up to 3 seconds.

web.dev’s font guide adds that Safari blocks text indefinitely. Its LCP guide says any value except auto or block keeps text visible, so LCP does not wait on the font. The price is layout shift, which the CLS guide blames on fallback and web font taking different space.

Match the fallback with size-adjust and ascent-override

The fallback is whatever system font the visitor already has. Microsoft lists Arabic support in Segoe UI and Tahoma, Apple’s system fonts list includes Geeza Pro on iOS and macOS, and Android’s fonts.xml maps Arabic to Noto Naskh Arabic. Phone makers can override that, and devices were outside this crawl.

MDN’s compatibility data (1 October 2026) shows size-adjust in Chrome 92, Firefox 92 and Safari 17, but ascent-override only in Safari Technology Preview, so iPhones honour size-adjust alone. Next.js next/font, Fontaine and Capsize compute the values (Chrome’s fallback guide); a UAE property portal in our crawl used next/font and loaded 84 KB.

The html[lang|="ar"] selector above needs a correct lang attribute, which 3 of 27 Arabic pages in the same crawl lacked. Our lang, dir and hreflang audit of Arab websites covers that fix.

When should you preload a font file?

Preload only the one or two files that render above-the-fold text, usually the Arabic Regular and perhaps the Arabic Bold. Nothing else. Preload ignores unicode-range, so every preloaded file downloads whether the page needs it or not, and web.dev warns that preloading takes bandwidth from other resources, including the hero image.

Our crawl found 14, 9, 9 and 8 preloaded font files on four homepages, and three of those four loaded 647 KB or more. web.dev’s root fix for late discovery is inlining @font-face rules in the <head>. When you do preload, add crossorigin even on your own domain: web.dev notes a font preloaded without it is fetched twice.

<link rel="preload" href="/fonts/brand-sans-arabic.woff2"
      as="font" type="font/woff2" crossorigin>

Self-hosting versus Google Fonts

Self-host on Arabic sites in most cases. Since Chrome 86 the HTTP cache is partitioned by top-level site, so a cached copy of a Google Fonts file from another website no longer helps yours. Self-hosting also removes the extra connection to fonts.gstatic.com, provided you subset and compress as carefully as Google does.

The Chrome partitioning post explains the cache key. The counterpoint is in web.dev’s font guide: the 2020 Web Almanac found sites using third-party fonts rendered faster, and self-hosting wins only with a CDN and HTTP/2. Most brands in our crawl self-hosted; 8 of 29 loaded a Google Fonts stylesheet.

All seven families in the first table sit in the ofl folder of the google/fonts repository, which grants permission to redistribute. If you stay on Google, preconnect to fonts.googleapis.com and fonts.gstatic.com. For a logo, the Google Fonts API text= parameter returns only the characters you list, which Google says can cut a file by up to 90%.

How do you fix Arabic fonts on WordPress?

Register self-hosted Arabic fonts in theme.json with the fontFace array, then switch off every plugin or page builder that injects its own Google Fonts request. The failure to look for is a duplicate: the theme serves the family locally while a builder fetches the same family again from Google, so visitors download it twice.

WordPress’s typography settings guide covers fontFace and the file:./ path, and the theme.json schema accepts fontDisplay, unicodeRange, sizeAdjust and ascentOverride.

"fontFamilies": [{
  "name": "Brand Sans",
  "slug": "brand-sans",
  "fontFamily": "\"Brand Sans\", \"Segoe UI\", Tahoma, system-ui, sans-serif",
  "fontFace": [{
    "fontFamily": "Brand Sans",
    "fontWeight": "300 700",
    "fontStyle": "normal",
    "fontDisplay": "swap",
    "unicodeRange": "U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E",
    "src": ["file:./assets/fonts/brand-sans-arabic.woff2"]
  }]
}]

In Elementor the switch is Elementor, Editor, Settings, Advanced, Google Fonts, Disable (Elementor help centre). Elsewhere, filter the Network panel by “fonts.g” and trace each request to its plugin. Storefronts need the same check; see our Salla and Zid store SEO audit.

Is that font licensed for production?

Check before launch, because serving a font outside its licence is a legal exposure on every page view. Our crawl found one Egyptian electronics retailer loading a font marked Trial on its live homepage. Trial builds exist for layout testing, so read the licence that came with the file and confirm it covers web embedding on your domain.

Commercial families such as Neo Sans Arabic and Graphik Arabic need a foundry web licence that also allows subsetting and self-hosting. Run ttx -t name brand.woff2 to read a file’s licence entries. Anything named Trial, Demo or Eval belongs on staging.

A 10-minute DevTools and Lighthouse routine

Run six checks on your Arabic homepage in a clean Chrome profile: the Network panel, font bytes, the preload count, loaded faces, layout shift during the swap, and Lighthouse’s font findings. The console lines below are the same reads we used in the crawl, so you can compare your page with the 134 KB median.

1. Network panel: Disable cache, filter by Font, reload. Flag ttf or otf files and families fetched twice.
2. Font bytes (third-party files without a Timing-Allow-Origin header show 0):

   performance.getEntriesByType("resource")
     .filter(r => /\.(woff2?|ttf|otf)(\?|$)/.test(r.name))
     .map(r => [r.name.split("/").pop(), Math.round(r.transferSize / 1024) + " KB"]);

3. Preloads: document.querySelectorAll('link[rel=preload][as=font]').length. Above 2 needs a reason.
4. Loaded faces: [...document.fonts].filter(f => f.status === "loaded").map(f => f.family + " " + f.weight).
5. Rendering tab: tick Layout Shift Regions, throttle to Slow 4G, reload. Shifted areas flash purple.
6. Lighthouse 13: read the Font display insight (formerly “Ensure text remains visible during webfont load”) and “Avoid enormous network payloads”.

Our read

The heavy pages in this crawl got that way through file decisions. Google’s subsets keep even full-coverage Arabic families under 50 KB per weight, yet a quarter of the homepages we measured loaded 500 KB or more. Those sites did not pick unusually heavy families; they loaded too many files and preloaded most of them.

Our working rule for an Arabic homepage: one Arabic family, two weights, woff2 only, Arabic and Latin subsets, swap with a matched fallback, one or two preloads. Budget about 120 KB, which covers Noto Sans Arabic Regular and Bold (96.8 KB of Arabic) plus both Latin subsets (20.9 KB).

The two Egyptian brands with Latin-only fonts made the opposite mistake: their Arabic text renders in whatever the device has. Third-party tags add their own weight on top, which our piece on Consent Mode and tracking on Arab websites covers.

What to do next

Asking which Arabic font is fastest misses the point. The better question is how many font files your homepage requests before the first line of Arabic text paints, and whether each one earns its place. One reload with the Network panel open answers it and points you to one of two next steps.

If you see two to four woff2 files under about 120 KB, fonts are not your bottleneck, so move to images and scripts. If you see eight or more files, any ttf, or one family loaded twice, start with subsetting and preloads. For help, I want VOCTOS to fix my Arabic site’s font loading, or for the wider picture, get my Arabic pages a full technical SEO review.

FAQ

Why is my Arabic website slow even though the images are optimised?

Check the fonts next. In our 2 October 2026 crawl of 29 Arab brand homepages, the median font payload was 134 KB, and 6 of 24 measurable sites loaded 500 KB or more. Open DevTools, filter the Network panel by Font, and count files. Beyond four, look for unsubsetted files, ttf files and unused weights.

Which Arabic Google Fonts are available as variable fonts?

Checked through the Google Fonts API on 2 October 2026: Noto Kufi Arabic and Noto Sans Arabic (100 to 900), Cairo (200 to 1000), Readex Pro (160 to 700) and Noto Naskh Arabic (400 to 700) are variable. IBM Plex Sans Arabic, Tajawal and Almarai ship as static weights only, so each weight is a separate file.

Should I use font-display swap or optional for Arabic text?

Use swap for brand headings and body text, with a fallback tuned through size-adjust so the swap barely moves the layout. Use optional where layout stability matters more than the brand font, since it skips the web font if it arrives late. Leaving the value unset lets Chromium hide text for up to 3 seconds.

Does loading Arabic fonts from Google Fonts still help through caching?

Not across sites. Chrome has partitioned its HTTP cache by top-level site since version 86, so a Google Fonts file cached on another website is downloaded again for yours. Google Fonts still subsets and compresses well, but self-hosting the same woff2 files on a CDN removes a third-party connection from the critical path.

What unicode-range should I use for an Arabic font subset?

Use U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF and U+FE70-FEFF for the Arabic blocks, plus U+200C-200E for the zero-width joiner, zero-width non-joiner and left-to-right mark. Put Latin characters in a second file under the same font-family name, so English-only pages never download the Arabic glyphs.