26%
Largest package-demand share
Noto Sans Arabic accounts for 26% of downloads across the six observed packages. This is a calculated share of this dataset, not total market adoption.
Arabic Web Observatory
12/12 live source checksArabic font performance and demand, measured.
A transparent benchmark of popular Arabic web fonts. Compare upstream binary weight, variable-font availability, and rolling Fontsource downloads without confusing package demand with total web adoption.
npm period: Jun 24, 2026–Jul 23, 2026 · refreshed every 24 hours
Researched and maintained by Moayyad Faris, VP of Engineering and software architect.
Quick answer
Start with the content, not the download ranking
For a general Arabic product interface, begin by testing Noto Sans Arabic. Use Noto Naskh Arabic when reading comfort is the priority, and reserve Noto Kufi Arabic or Cairo for stronger headings and brand expression. The measured data below helps you estimate delivery complexity; it does not replace visual testing with your actual Arabic copy.
Package downloads
396.3K
Combined rolling npm demand
Calculated · demand proxy
Source: npm Downloads API ↗Smallest upstream set
Noto Naskh Arabic
300 KB across 1 file
Measured · not transfer size
Source: Google Fonts repository ↗Current dataset
Six Arabic font families compared
| Font | Best suited for | npm / 30 days (proxy) | Upstream binaries | Variable |
|---|---|---|---|---|
| 01Noto Sans Arabic@fontsource/noto-sans-arabic | UI / body | 101,814 | 825 KB(1) | Yes |
| 02IBM Plex Sans Arabic@fontsource/ibm-plex-sans-arabic | UI / editorial | 100,354 | 1652 KB(7) | No |
| 03Cairo@fontsource/cairo | UI / display | 85,829 | 585 KB(1) | Yes |
| 04Tajawal@fontsource/tajawal | UI / display | 76,674 | 409 KB(7) | No |
| 05Noto Naskh Arabic@fontsource/noto-naskh-arabic | Long-form reading | 22,319 | 300 KB(1) | Yes |
| 06Noto Kufi Arabic@fontsource/noto-kufi-arabic | Headings / UI | 9,312 | 424 KB(1) | Yes |
What the data says
Three findings from the current snapshot
4
Variable families available
4 selected families use variable binaries upstream. That creates consolidation options, but only a production subset comparison can determine whether variable or static delivery is smaller.
300 KB
Smallest upstream family total
Noto Naskh Arabic is the smallest repository set in this snapshot. Treat that as an upstream packaging fact—not a prediction of browser performance.
Decision guide
Which Arabic web font should you choose?
These recommendations are editorial guidance based on typical roles, not measured performance winners. Shortlist by content type first, then benchmark the exact files and weights your product will ship.
Noto Sans Arabic
Best general-purpose starting point
- Choose it when
- You need a neutral Arabic UI face for product interfaces, dashboards, and mixed-language layouts.
- Watch for
- Its upstream variable file covers width and weight axes, so compare a production subset—not the complete repository binary.
IBM Plex Sans Arabic
Best for a technical product voice
- Choose it when
- You want an Arabic interface to sit naturally beside IBM Plex Sans in English or code-heavy products.
- Watch for
- The repository stores seven separate binaries. Ship only the weights your interface actually uses.
Cairo
Best for prominent UI and brand moments
- Choose it when
- You want contemporary headings, navigation, marketing sections, or interfaces with a stronger visual personality.
- Watch for
- The complete variable source is not a browser transfer estimate. Test small body text before using it everywhere.
Tajawal
Best for a compact modern interface
- Choose it when
- You need a clean geometric voice across app navigation, labels, cards, and concise marketing copy.
- Watch for
- It is stored as seven static binaries upstream, making weight discipline important for performance.
Noto Naskh Arabic
Best for Arabic reading
- Choose it when
- Your product contains articles, documentation, long descriptions, or other reading-heavy Arabic content.
- Watch for
- Pairing a Naskh body face with a sans or Kufi interface face adds another family, so budget the extra request and bytes.
Noto Kufi Arabic
Best for structured headings
- Choose it when
- You need distinctive section headings, compact labels, or a Kufi visual character in an interface.
- Watch for
- Dense Kufi shapes can become tiring in long paragraphs. Validate readability at the smallest production size.
Selection framework
A five-question font performance checklist
A font family is only the starting point. The production decision is the combination of script coverage, files, weights, fallback behavior, and visual quality.
- 01
Does it cover your real content?
Test Arabic letters, diacritics, Arabic and Persian digits, punctuation, Latin text, and any regional characters your users enter.
- 02
How many styles do you actually need?
Start with regular and bold. Add another weight only when the interface has a demonstrated hierarchy that requires it.
- 03
What will the browser download?
Measure the deployed WOFF2 assets after subsetting. Do not use a source TTF total as a Core Web Vitals forecast.
- 04
Does fallback preserve the layout?
Choose a system fallback with reasonably similar proportions and use font-display intentionally to control the loading transition.
- 05
Is it readable in the hardest context?
Review dense tables, small labels, low-resolution screens, long paragraphs, bold Arabic, and mixed Arabic–Latin lines.
Copyable example
A lean self-hosted starting point
Install one Fontsource family, import only the weights you use, and define an Arabic-aware fallback stack. This example avoids loading every available file.
Install and import
npm install @fontsource/noto-sans-arabic
// app/layout.tsx
import "@fontsource/noto-sans-arabic/400.css";
import "@fontsource/noto-sans-arabic/700.css";CSS stack
:root {
--font-arabic:
"Noto Sans Arabic",
Tahoma,
Arial,
sans-serif;
}
[lang="ar"] {
font-family: var(--font-arabic);
}How to read this
Useful signals, with deliberate limits
npm downloads measure requests for each Fontsource package over the same rolling period. They can indicate developer demand, but they do not measure unique users or total websites.
Repository size is the sum of font binaries currently stored for a family in Google Fonts. It is not the exact browser transfer size: production delivery can use WOFF2 compression, Unicode subsetting, selected weights, and custom text subsets.
A variable family can consolidate multiple styles into one binary, but the best choice still depends on which weights, scripts, and glyphs a product actually ships.
Methodology
Reproducible by design
- 01 / GOOGLE FONTS
Read each family’s public repository directory and total its TTF, OTF, WOFF, and WOFF2 binaries.
- 02 / NPM
Request the official rolling last-month count for the matching Fontsource package.
- 03 / REFRESH
Cache both feeds for 24 hours. If a provider is unavailable, show the last verified snapshot instead of fabricating a value.
Questions developers ask
Arabic web-font FAQ
What is the best Arabic font for a website?
There is no universal winner. Noto Sans Arabic is a practical starting point for interfaces, Noto Naskh Arabic suits long-form reading, and Noto Kufi Arabic works well for structured headings. Choose against real copy, target sizes, required weights, and the Latin font used beside it.
Does the smallest repository font make the fastest website?
Not necessarily. Repository totals describe upstream source binaries, not the WOFF2 files a browser downloads. Real transfer cost depends on format, Unicode subsetting, selected weights, variable-font axes, caching, and whether the font is self-hosted. Measure the exact production files before deciding.
Are npm downloads the same as website adoption?
No. npm downloads are a package-demand proxy. Automated builds, repeated installs, mirrors, and one developer using several environments can all generate downloads. The metric is useful for comparing activity among the selected Fontsource packages, but it does not count unique developers or websites.
Should Arabic web fonts be self-hosted?
Self-hosting gives you direct control over caching, privacy, availability, and subsetting. A hosted provider can simplify setup and may benefit from its delivery infrastructure. Whichever route you choose, preload sparingly, use WOFF2, set an intentional fallback stack, and verify font-display behavior.
Should I use a variable Arabic font?
Use a variable font when one file replaces several styles you genuinely need. It is not automatically smaller than one static weight. Compare the variable subset with the exact static weights required by your design, then test rendering across the browsers and devices your audience uses.
Continue testing
Turn the benchmark into a production decision
Shortlist two families, render the same Arabic interface in both, then measure the exact WOFF2 files and weights. The next dashboard release will add production subset transfer sizes and historical trends.