The comprehensive Guide for Arabic Web Font

Bara‘ S. Harb
4 min readFeb 2, 2020

--

Your Guide for Best Arabic Web Font

Index

  1. Arabic Web Font Brief and Problems that might be facing.
  2. Most Arabic Web Font Recommended.
  3. Most Popular Web Arabic Font with Numbers.

Introduction

Did you find articles that help and guide you to choose the best Arabic web font?

Are you interested in web fonts and typography?

Do you want fonts that very important as user experience, readability and best practices for the users and in the term user interface for the website as visual and aesthetics?

So if your answer is “ YES “ you’re in the best place.

Today this article will help you and save your time from searching in narrow content so that makes you a more productive person.

1. Arabic Web Font Brief and Problems that might be Facing

Arabic fonts have many ways to draw and master them. One of the main reasons for the calligrapher’s ability to produce a painting from these lines is the connection to each other and the Arabic calligraphy of several types, starting with the Kufic calligraphy, the Thuluth, the Diwani and etc.

In designing websites, the designer wants to introduce the aesthetics of Arabic calligraphy to the design and here start the obstacles that might face, but let us know the importance of the font that is used in the content of the website first.

There are some types of fonts that can not display on all Internet browsers such as Google, Firefox and this is what no one wishes. Another problem you may face is the font you want that needs to upload files until you can upload them to the browser and this leads to slow loading of content. not to mention the failure to upload and download font files on some Internet browsers.

In general, there are 2 ways to use non-basic fonts: the first we talked about earlier is the addition of new files for the font you want to use font-face CSS directive and the second way is to convert the font using certain tools to an image so that replace all written content with images of these fonts at the time of loading the page. This method is never recommended as web design experts because it increases page loading time and the user can not copy any existing word. Images may not be 100% tidy so the user can feel this easily. This is called text alignment.

Web safe is the type of fonts that are usable and viewable on all Internet browsers without downloading any additional files. There are common 9 lines in English and only 3 in Arabic:

1. Arial

2. Tahoma

3. Courier New

2. Most Arabic Web Font Recommended

Four Arabic google Fonts Which are based on Serif Category

  1. Markazi Type font
  2. Amiri Font
  3. Aref Ruqaa Font
  4. Scheherazade Font

Seven Arabic Google Fonts Which are based on Sans Serif Category

  1. Tajawal Font
  2. Mada Font
  3. Cairo Font
  4. Changa Font
  5. Harmattan Font
  6. El messiri Font
  7. Reem Kufi Font

Seven Arabic Google Fonts Which are based on Display Category

  1. Baloo Bhaijaan Font

2. Jomhuria Font

3. Katibeh Font

4. Lxalezar Font

5. Lemonada Font

6. Mirza Font

7. Rakkas Font

3. Most Popular Web Arabic Font used in the websites.

Here are some famous and common websites that used a different type of Arab web fonts

1.Wikipedia: Arial Font

2.Font face: Dorid Kufi Font

3.Google search: Helvetica Neuo Font

4.Facebook: System UI Font

5.Instagram: System UI Font

6.Twitter: Tahoma Font

7.Jeran: Tahoma Font

8.Yahoo: Helvetica Neue Font

9.Koora: Helvetica Font

10.Fatakat: Dorid Kufi Font

11.Traidnt: Dorid Kufi Font

12.Aljazeera.net: Aljazeera Font

13.Masrawy: Dorid Kufi Font

14.Youm7: Dorid kufi Font + Arial Font + Helvetica Neue Font

15.Yalla Kora: Dorid Kufi Font

16.Bayt.com: Lato Font

17.Gmail: Roboto Font + google sans Font

18.Cambly: Tajawal Font

19.Amnesty.org: Tahoma Font + FrutigerLT Arabic Font

So after these numbers, we see the most Arabic font used is Dorid Arabic kufi and what is confirm that our survey on our Talnetera Product that discovers the droid kufi is the most used…

Conclusion

We can use the best font that fits with your brand archetype and your product expect any websites used. you should also aware of the fonts in all versions fitting and near for the English font to prevent any gapping between all styles.

Here is one of my references

--

--