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?
Asked
Active
Viewed 3.8k times
5 Answers
16
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:
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)
- Windows (Microsoft)
- Across generations (click to sort on Target Script)
- Windows 8
- Windows 7
- Windows Vista
- Windows XP SP2
Basil Bourque
- 303,325
- 100
- 852
- 1,154
-
1DejaVu 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". – Ammar Alyousfi Nov 06 '17 at 19:13
-
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; – JsAndDotNet Mar 21 '20 at 09:23
-
1@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. – Basil Bourque Mar 21 '20 at 16:52
9
+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.
4
Google provides free fonts
Getting Started Guide: https://developers.google.com/webfonts/docs/getting_started#Quick_Start
Omer M.
- 630
- 7
- 17
-
-
1yes, they provide fonts for arabic: http://www.google.com/webfonts/earlyaccess – Omer M. Sep 27 '12 at 11:47
-
