What has been a dream among web designers for years is slowly becoming a reality. Not very long ago they were limited to a very basic set of fonts when it came to designing websites. There has been some kind of revolution since fonts can now be served through the @font-face property across a wide range of web browsers. Thus allowing designers to be much more creative and flexible when approaching typography on screen.
Companies like TypeKit and FontShop offer their customers painless integration of these new webfonts into their websites. There are hundreds of typefaces available but till today there is no real Arabic webfont.
Over the last two weeks I have been trying to create an Arabic webfont. What started as a little task Ibrahim had given me on the first day of my internship at SYNTAX, quickly became an ambitious side project of Hussein Alazaat and me.
First of all, we had to find a typeface that works well on screen. There are not actually that many fonts designed for this purpose and there are even less Arabic fonts of that kind. In addition to that I cannot read Arabic characters nor do I know the rules of Arabic script – this was Husseins job. In the end it came down to two fonts: One named Marwan and another called Al Kharashi.
That next and supposably final step should have been to have these fonts automatically converted into the four different webfont formats. There is this handy utility called FontSquirrel and it did exactly that. However, there is one major problem with their type of conversion: The individual characters are disconnected. Arabic script is caseless but cursive: Therefore each character has to be availaible in three versions depending on whether it is in the beginning, middle or end of a word.
The second attempt lead us to various online forums in which we found detailed descriptions and multiple tools for the semi-manual conversion of TrueType fonts to WebFonts. Yet again it did not give us the desired results: Most characters were connected but some of them were missing completely for reasons still unknown.
In a third and desparate attempt we began to look at the encoding of the individual fonts. For those of you who do not know what this means: Each character has a unique code that tells the computer when to use it. We tried to change the encoding by hand to get different results, but again, it did not prove succesful.
Only then did we try one of the most complete font families in the world, Nimbus Sans by URW++, and voila it worked – the issue here: the result does not make sense at all …
I have to admit that I am a little disappointed with the outcome: It looks like there is no way to create a fully functional Arabic webfont (without the help of black magic as it seems to be practiced by the creators of Nimbus) as of today.
Update: Ibrahim found a solution! TypeFront is service that helps you convert regular fonts to web fonts and provides hosting for them as well. So far it has been working with all Arabic fonts that we tried. Even though, it is not clear how they convert the fonts – must be a different tool/algorithm – it is good to see that somebody cares about non-latin stuff. They have a free offer (1 font + 500 requests/day) and payed plans that allow for more. Give it a try! It might be just what you are looking for.