Skip to main content

Arabic Web Fonts on iOS [RESOLVED]

As per my previous post here about using custom Arabic web fonts for Safari on iOS, finally I had the solution, and guess what ?! it’s using TrueType fonts !!

It seems like iOS has an issue with glyph lookup names for Arabic various ligatures when using custom TTF as @font-face in CSS, so I figured why not using my parser I used for Flash Player and ActionScript to manually perform that procedure for the iOS as well ?!, the funny thing that it worked nicely !!

You can check this example on your iPad ..

Arabic Web Fonts on iOS

Note: your iPad must have iOS version 4.2 or higher ..

If you do not have your fonts in TrueType format, I recommend using FontForge to generate a working TTF version ..

CSS & Arabic Custom Fonts on iOS

This one almost got me crazy !
I had to use custom Arabic fonts for one of my clients who requires a special version from his Flash website that works the same way on iPad ..
Of course the problem is that iOS do not support Flash Player, and it seems it never will ..

Fortunately, this project can be transformed to AJAX using jQuery, there’s no special features that works only on Flash Player, or at least that’s what I thought!

First issue I have crossed is using custom Arabic fonts, I did my search and I found the absolute fact about iOS ..

iOS supports only SVG as web fonts using CSS, and it requires a unique ID passed to each font!

Ok, I can live with that, I found this wonderful tool for converting my OTF/TTF fonts to SVG with unique ID, it works just fine, but ..
The problem pops-up for Arabic fonts as usual ! that service has an expert feature for entering a unicode range to be included in the output font, so I figured that since it does not seem to support Arabic language directly, I can just enter the Arabic unicode ranges required, in this case only 2 ranges are necessary for Arabic ligatures (0600-06FF,FE70-FEFE) ..
But it did not work properly, many glyphs are missing for some mysterious reason !

I gave it a bit more time for digging about this issue, and I found this JAVA command line tool that converts TTF to SVG, first test result was another failure !
At this point I was going to give up, but i just couldn’t !! and voilà, I caught the cockroach !
That ttf2svg tool won’t map any Arabic glyphs unless you define a decimal range for it, so I used the following command for Arabic only fonts:

java -jar batik-ttf2svg.jar foo.ttf -l 1536 -h 65278 -id foo -o foo.svg

And this one for Arabic/Latin fonts:

java -jar batik-ttf2svg.jar foo.ttf -l 0 -h 65278 -id foo -o foo.svg

The key is converting the hexadecimal ranges for Arabic glyphs to decimal values and pass it to that command, and since I have multiple ranges required for Arabic glyphs and that tool doesn’t let me pass multiple ranges, I just used first value from first range and last value from last range ..
That’s why when having Arabic only font you need to start with 1536, but when having Arabic/Latin font you need to start with 0 ..

One other way, more advanced one, is using FontForge, I had to edit the output SVG manually to set the UniqueID

<font id="XXXXXX"  horiz-adv-x="XXXX" >

And I had to add (xmlns=”” version=”1.1″) to the svg tag on top

<svg xmlns="" version="1.1">

The result is similar to the JAVA tool, something still wrong, many letters are misplaced and scrambled with the wrong glyphs, others remain missing !

You can check this example on your iPad, if you are Arabic speaker, you’ll get what I mean ..

I hope this helps someone out there who stuck at this issue when developing a compatible iOS website with custom Arabic fonts ..
I will keep digging about this, either I can find a work around or Apple simply releases an iOS update that renders Arabic SVG fonts properly ..

By the way, that article about Apple improving iOS support for web fonts even in TrueType, it never worked for me !

Update: final solution available here