What are my "web font" choices for Arabic?

Question

I am working on a WordPress site that will be entirely in Arabic (except for the backend). I am an English speaker and have never dealt with Arabic in my time as a web developer. What font choices do I have that should be available on the vast majority of Arabic speakers' computers?

Solution 1

Font stack

Be sure to use a CSS 'font stack' to list many fonts by name in order of your preference. For example:

font-family: "Geeza Pro", "Nadeem", "Al Bayan", "DecoType Naskh", "DejaVu Serif", "STFangsong", "STHeiti", "STKaiti", "STSong", "AB AlBayan", "AB Geeza", "AB Kufi", "DecoType Naskh", "Aldhabi", "Andalus", "Sakkal Majalla", "Simplified Arabic", "Traditional Arabic", "Arabic Typesetting", "Urdu Typesetting", "Droid Naskh", "Droid Kufi", "Roboto", "Tahoma", "Times New Roman", "Arial", serif;

CAVEAT The fonts above were arbitrarily chosen as possibly having Arabic glyphs. That list is not my recommendation; I have not seen any of those fonts as I neither read nor speak Arabic. You are responsible for making your own choice of fonts.

---

Alan Wood's Unicode Resources provides lists of Arabic fonts for:

• Mac OS X
• Mac OS 9
• Windows

Those lists are somewhat outdated. You may find that Apple, Microsoft, and the Linux makers have been adding more and better fonts to better support non-European scripts in recent years.

Alan Wood also provides this Arabic test page.

---

DejaVu Font

DejaVu is an actively developed, open-source, free license, and free of cost font. Has wide support for various scripts including Arabic. Installed by default on many Linux distros. Has serif, sans serif, and monospace families. See PDF samples.

Most glyphs are well designed. If you find any to be lacking, you are welcome to design and contribute improvements.

BEWARE DejaVu is released in different packages. The LGC downloads (Latin, Greek, Cyrillic) omit Arabic and similar character sets due to technical issues. Pay close attention when choosing from their download page.

---

Google for "font survey" to find percentage of computers that have been found to have various fonts installed.

---

Fonts supplied with:

• Mac OS X (Apple)
  • Across generations (click to sort on Target script)
• iOS (Apple)
  • Across generations
• Windows (Microsoft)
  • Across generations (click to sort on Target Script)
  • Windows 8
  • Windows 7
  • Windows Vista
  • Windows XP SP2
• Google
  • Roboto font
  • Droid Arabic Kufi & Naskh for Google™ fonts

Solution 2

+1 with Tahoma and DejaVu ("DejaVu sans" for emphasis) were the way to go, but things are changing --thanks God-- with first Arabic Web Fonts coming out earlier this year.

• Alefba has put some useful information and ressources on the subject, e.g. Arabic and Persian Webfonts with WordPress blogs
• See also How to use custom arabic fonts in your web design projects recently published by Hussain from Bahrain Web Design

Hope this will be of any help for you or any other Arabic website designer.

Solution 3

Google provides free fonts

Getting Started Guide: https://developers.google.com/webfonts/docs/getting_started#Quick_Start

Solution 4

Tahoma from 0.5em to 1.1 em and Arial from 1.2em and up

Solution 5

There are a list of these kind of fonts. Here are the ones I think are best, but you have to decide for yourself of what font is best for your website.

WebFonts:

• Dinnext
• Greta
• Arabic
• Droid Sans
• Jennah
• Helvetica
• Ge
• SS
• Cocon
• ff Frutiger
• Hacen

View more solutions

Comments

[Spectre87]

Are you sure they have Arabic fonts? It didn't look like it to me.

[Omer M.]

yes, they provide fonts for arabic: google.com/webfonts/earlyaccess

[Spectre87]

Ah, I see now. I wasn't looking at the early access section :)

[Ammar Alyousfi]

DejaVu doesn't cover Arabic regarding its serif category. It supports Arabic with its sans category. So instead of "DejaVu Serif", one should use "DejaVu Sans".

[JsAndDotNet]

I implemented this. My client from the UAE said it was a decorative font and not easy to read. Will update this comment when I find out what he wants. He chose -> font-family: jannat, sans-serif;

[Basil Bourque]

@HockeyJ I suggest you specify more than one font in your font stack. CSS uses the first font found in the order you list them. So there is no reason to shorten the list. Think about other platforms such as MS Windows, macOS, iOS, iPadOS, BSD, etc. Think about different countries where an OS may be configured with various sets of fonts. Come up with a list of preferable fonts with good support for Arabic glyphs.