Best Arabic web fonts, and how to pair them with Latin fonts
The Arabic web fonts worth using on business sites, all free on Google Fonts, the Latin faces they pair with, sizing rules, and how to load them quickly.
By Sohail Hussain5 November 20266 min read
For most business websites the best Arabic web fonts are the free, well-made families on Google Fonts. IBM Plex Sans Arabic, Noto Sans Arabic, Readex Pro, Cairo, Almarai and Tajawal suit interfaces and body text. Noto Naskh Arabic and Amiri suit long reading. Choose the one whose structure and weight range match your Latin typeface, and if you can, pick a family that was designed in both scripts together, such as IBM Plex or Noto, because then the pairing is already done.
Type is where most bilingual sites give themselves away. The English designer chose the Latin font with care, and someone later used whatever Arabic font was at hand. This post is the typography part of our guide to building an Arabic website, and it is how we choose fonts in our Arabic and multilingual websites projects.
What makes an Arabic font right for a website?
Arabic type comes in a few broad styles, and the style matters more than the individual font.
- Naskh is the everyday style of books and newspapers. It has strong contrast between thick and thin strokes and is the most comfortable for long reading.
- Kufi is geometric and angular. It works for headings, logos and short labels, and tires the eye in paragraphs.
- Modern sans designs simplify Naskh forms and reduce stroke contrast for screens. Most interface fonts are in this group, and most business sites should use one.
- Ruq'ah, Diwani and Thuluth are calligraphic styles. Use them for a logo or a single display line, never for text.
Beyond style, check four things before you commit. The font needs the weights your design uses, at least regular and bold. It needs correct joining and the lam-alef ligature, which every font on the list below has. It should position diacritics cleanly if your content uses them, as religious, educational and children's content often does. And if the site may add Persian or Urdu later, check that the font includes the extra letters those languages use.
Which Arabic fonts do we recommend?
All of these are on Google Fonts, free for commercial use and available for self-hosting. Weights are as listed on Google Fonts as of October 2026.
| Font | Style | Weights | Pairs with |
|---|---|---|---|
| IBM Plex Sans Arabic | Modern sans, corporate and even | 7 static weights, 100 to 700 | IBM Plex Sans, its own family |
| Noto Sans Arabic | Modern sans, neutral | Variable, 100 to 900, plus a width axis | Noto Sans, Inter and most neutral sans faces |
| Readex Pro | Modern sans, open and very readable | Variable, 160 to 700 | Its own Latin, based on Lexend |
| Cairo | Geometric sans with its own Latin | Variable, 200 to 1000 | Its own Latin, or Montserrat and Poppins |
| Almarai | Clean, simple sans | 4 static weights: 300, 400, 700, 800 | Inter, Roboto |
| Tajawal | Light, friendly sans | 7 static weights, no 600 | Nunito, Rubik |
| Rubik | Rounded sans, Arabic added to the Latin family | Variable, 300 to 900 | Its own Latin |
| Noto Kufi Arabic | Kufi, geometric | Variable, 100 to 900 | Geometric sans faces, for headings |
| Noto Naskh Arabic | Naskh, for reading | Variable, 400 to 700 | Noto Serif, Source Serif |
| Amiri | Classical Naskh | 400 and 700, with slanted styles | Serif faces for editorial or legal text |
Tajawal's missing 600 weight catches designers out. If the English design uses semibold headings and the Arabic font has no 600, the browser picks the nearest weight or synthesises one, and the headings in the two languages no longer match.
How do you pair an Arabic font with a Latin font?
There are two routes.
Use a family designed in both scripts. IBM Plex, Noto, Rubik, Readex Pro with Lexend, and Cairo all have Latin and Arabic designed to sit together. Weights correspond, proportions were balanced by the designers, and you load one family. This is the safest choice for a company site.
Match an existing Latin brand font. If the brand already uses a Latin face with no Arabic, find an Arabic font that shares its character:
- Match structure. A geometric Latin face such as Montserrat or Futura pairs with geometric Arabic designs. A humanist Latin face such as Source Sans or Open Sans pairs with a Naskh-based modern sans.
- Match contrast. A low-contrast Latin face looks wrong next to a high-contrast Naskh.
- Match the weight range. If the design uses light, regular and bold, both fonts need all three.
- Match visual size, not nominal size. Arabic usually reads smaller at the same pixel size, so the Arabic needs 5 to 15 percent more.
Test the pair with real text, not specimen sentences: a heading, a paragraph and a button in each language, side by side at the sizes the design uses. Our type scale generator helps set up a scale you can apply to both, with the Arabic stepped up.
How do you load Arabic fonts without slowing the page?
Arabic font files are larger than Latin ones because each letter has several joined forms. Three habits keep pages fast.
Load few weights. Regular and bold cover most sites. A variable font is one file for every weight, which is often smaller than three static files.
Use unicode-range. It tells the browser to download a font only when the page contains characters in that range, so English pages never fetch the Arabic file. MDN documents the unicode-range descriptor. Google Fonts and Next.js's next/font set it for you. When self-hosting, write it yourself, and use size-adjust to correct the visual size of the Arabic without touching the Latin:
@font-face {
font-family: "Plex Arabic";
src: url("/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
font-weight: 400;
font-display: swap;
size-adjust: 110%;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
body {
font-family: "Inter", "Plex Arabic", sans-serif;
}
The browser picks a font per character. Latin letters come from Inter. Inter has no Arabic letters, so Arabic falls through to Plex Arabic, which is downloaded only on pages that contain Arabic. Mixed lines, such as an Arabic sentence with an English product name, then use the right font for each part.
Self-host. Serving fonts from your own domain or through next/font avoids a connection to another server and the privacy question that comes with Google's font servers. Preload only the regular Arabic weight, and only on Arabic pages. Building a multilingual Next.js site shows the next/font setup.
Finally, look at the fallback. If the web font fails, Arabic text drops to the device's system Arabic font, which differs between Windows, Apple devices and Android. Check a page with the web fonts blocked; if the layout breaks, fix the line heights and sizes so the fallback is at least readable.
When is a commercial Arabic font worth paying for?
When the brand has a distinctive commercial Latin typeface and needs an Arabic companion with the same personality, or when the Arabic itself is part of the brand identity. Specialist Arabic foundries such as 29LT and Boutros sell families designed for this, and some will extend a brand font into Arabic.
Web licences for commercial fonts are usually priced by monthly page views or by domain, renewed or bought outright depending on the foundry. Read the terms for self-hosting, app use and subdomains before you buy, because a font licensed for the website may not cover the mobile app or the email templates.
For most company sites it is not worth it. The free families above are well drawn, actively maintained and familiar to Arabic readers. A business with a 15-page bilingual site gets more from choosing one of them carefully and setting it well than from paying for a rarer name. The setting errors that make Arabic look careless, such as letter-spacing, fake italics and cramped line heights, are listed in Arabic typography mistakes, and they spoil an expensive font as easily as a free one.
Was this guide useful?