Arabic font previewer
Preview Arabic web fonts side by side with your own text.
FreeRuns in your browserNo signupUpdated 2026-11-05
Fonts (6 of 12 max)
Fonts load from Google Fonts only when ticked. Nothing else leaves your browser.
Fonts compared
6
0 loaded
Weight shown
400
28px, line height 1.8
Noto Sans Arabic
SansLoadingنصمم مواقع عربية سريعة وواضحة تعمل على الهاتف والحاسوب. احجز استشارتك المجانية اليوم: ٠٥٠١٢٣٤٥٦٧
Modern sans, good for interfaces and body text · weights 100–900 (variable)
Cairo
SansLoadingنصمم مواقع عربية سريعة وواضحة تعمل على الهاتف والحاسوب. احجز استشارتك المجانية اليوم: ٠٥٠١٢٣٤٥٦٧
Modern sans, good for interfaces and body text · weights 200–1000 (variable)
Tajawal
SansLoadingنصمم مواقع عربية سريعة وواضحة تعمل على الهاتف والحاسوب. احجز استشارتك المجانية اليوم: ٠٥٠١٢٣٤٥٦٧
Modern sans, good for interfaces and body text · weights 200, 300, 400, 500, 700, 800, 900
IBM Plex Sans Arabic
SansLoadingنصمم مواقع عربية سريعة وواضحة تعمل على الهاتف والحاسوب. احجز استشارتك المجانية اليوم: ٠٥٠١٢٣٤٥٦٧
Modern sans, good for interfaces and body text · weights 100, 200, 300, 400, 500, 600, 700
Amiri
NaskhLoadingنصمم مواقع عربية سريعة وواضحة تعمل على الهاتف والحاسوب. احجز استشارتك المجانية اليوم: ٠٥٠١٢٣٤٥٦٧
Traditional Naskh, good for long reading · weights 400, 700
Noto Naskh Arabic
NaskhLoadingنصمم مواقع عربية سريعة وواضحة تعمل على الهاتف والحاسوب. احجز استشارتك المجانية اليوم: ٠٥٠١٢٣٤٥٦٧
Traditional Naskh, good for long reading · weights 400–700 (variable)
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&family=Cairo:wght@400;700&family=Tajawal:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@400;700&family=Amiri:wght@400;700&family=Noto+Naskh+Arabic:wght@400;700&display=swap" rel="stylesheet">
:lang(ar) {
font-family: "Noto Sans Arabic", sans-serif;
font-weight: 400;
line-height: 1.8;
letter-spacing: normal;
}
/* Alternatives */
/* font-family: "Cairo", sans-serif; */
/* font-family: "Tajawal", sans-serif; */
/* font-family: "IBM Plex Sans Arabic", sans-serif; */
/* font-family: "Amiri", serif; */
/* font-family: "Noto Naskh Arabic", serif; */import { Noto_Sans_Arabic, Cairo, Tajawal, IBM_Plex_Sans_Arabic, Amiri, Noto_Naskh_Arabic } from "next/font/google";
const notoSansArabic = Noto_Sans_Arabic({ subsets: ["arabic"], weight: ["400", "700"], display: "swap" });
const cairo = Cairo({ subsets: ["arabic"], weight: ["400", "700"], display: "swap" });
const tajawal = Tajawal({ subsets: ["arabic"], weight: ["400", "700"], display: "swap" });
const ibmPlexSansArabic = IBM_Plex_Sans_Arabic({ subsets: ["arabic"], weight: ["400", "700"], display: "swap" });
const amiri = Amiri({ subsets: ["arabic"], weight: ["400", "700"], display: "swap" });
const notoNaskhArabic = Noto_Naskh_Arabic({ subsets: ["arabic"], weight: ["400", "700"], display: "swap" });The embed code asks for the weight you picked and bold (700), or the nearest each font has. Fewer weights mean smaller downloads.
About this tool
How it works and how to read the result.
Need this done for you?
Arabic & multilingual websites
English and Arabic websites with proper right-to-left layouts.
See the serviceWhat it does
This previewer shows Arabic web fonts side by side with the text you type, so you can choose a typeface by looking at your own headline rather than a sample alphabet. It covers 31 Arabic families from Google Fonts, grouped as modern sans, Kufi, Naskh and display styles, all of which include the Arabic character set and are free to use on websites.
Set the size, weight and line height once and every font updates together. Fonts that lack the weight you picked show their nearest one, marked with a badge. When you have a shortlist, the tool writes the embed code for Google Fonts, a CSS rule and a next/font/google snippet for Next.js sites.
How to use it
- Type your own text, or use one of the samples: a sentence, the alphabet with digits, fully marked text, or Arabic mixed with English.
- Set the size, weight and line height you plan to use.
- Tick up to 12 fonts to compare. Filter the list by style to narrow it down.
- Use "Copy CSS" on a card to grab one font-family line.
- Copy the embed, CSS or Next.js code from the bottom of the results.
How to read the result
Each card shows the font name, its style, the weights it offers and whether it has loaded. A "Showing 700" badge means the font has no exact match for your chosen weight. Lalezar, Rakkas and Jomhuria come in one weight and are display faces; use them for headings, not body text.
Look at three things. First, the joins: letters should connect smoothly at your body size, with no gaps. Second, the diacritics sample: marks need room above and below, and some fonts need a line height of 1.8 or more to keep them from touching the line above. Third, the digits: check that Arabic-Indic and Western digits sit well next to the letters at your chosen size.
The embed code asks Google Fonts for only the weights you need: your chosen weight and bold. The Next.js snippet uses next/font/google, which downloads the fonts at build time and serves them from your own domain, so visitors' browsers send no requests to Google.
Keep letter-spacing at normal for Arabic. Spacing letters apart breaks the connections between them. To test full pages, pair this with the colour contrast checker for text colours. Choosing and setting Arabic typography across a bilingual site is part of our Arabic and multilingual website service.
Questions
Frequently asked.
Which Arabic font is best for a website?
For interface text and body copy, a modern sans such as Noto Sans Arabic, IBM Plex Sans Arabic, Cairo or Tajawal is the usual choice: clear at small sizes and available in several weights. For long reading, a Naskh such as Noto Naskh Arabic or Amiri feels more traditional. Keep Kufi and display fonts for headings.
Do these fonts cover English as well?
Most of them include Latin letters, so a bilingual site can use one family for both languages. Type an English sentence into the preview to see how the Latin half looks; in some families it is noticeably plainer than the Arabic.
Does the preview load anything from outside my browser?
Only the fonts you tick, from Google Fonts. Each ticked family adds one stylesheet from fonts.googleapis.com, which loads the font files from fonts.gstatic.com. Your preview text is not sent anywhere.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide