Arabic fonts: Major Issues

Binish Mushtaq

unread,

Dec 5, 2012, 10:55:11 AM12/5/12

to early-acc...@googlegroups.com

With the Arabic Fonts there are major issues, specially when using them in navigation. Like for Kufi it creates too much padding on the left. Top Padding too much for amiri. Could someone from these discussions team up with me to solve these issues

Chief Mike Kouklis

unread,

Feb 12, 2013, 2:53:42 AM2/12/13

to early-acc...@googlegroups.com

On Wednesday, December 5, 2012 11:55:11 PM UTC+8, Binish Mushtaq wrote:

With the Arabic Fonts there are major issues, specially when using them in navigation. Like for Kufi it creates too much padding on the left. Top Padding too much for amiri. Could someone from these discussions team up with me to solve these issues

Please specify the fonts file name(s)
like Microsoft Uighur Regular
and the unicode UCN Sequence and Unicode-names of each of the characters.
Like:
__۰ۖ__ = \u06F0\u06D6 EXTENDED ARABIC-INDIC DIGIT ZERO + ARABIC SMALL HIGH LIGATURE SAD WITH LAM WITH ALEF MAKSURA

__عامري‎__ = ? Ameri

Bartek Stańkowski

unread,

Mar 4, 2013, 3:45:46 AM3/4/13

to early-acc...@googlegroups.com

Hi,

I also have some questions about Arabic fonts and Droid Kufi.

In my current project we’re using Droid Sans for English and Droid Arabic Kufi with right to left reading direction on Arabic version of the site. Right now I link to fonts directly in Google Web Fonts directory. I tried to download them, convert with Fontsquirrel generator and serv from our domain or CDN, but it didn’t make a difference.

There are two problems:

1. Browsers support: Droid Kufi does not work at all in IE7 (not a big problem, really) but also on iOS, which is more important. Any ideas why and what can I do to make it work?

2. IE8 and some Android versions don’t display special characters and show a square instead. If I understand correctly, Droid Kufi contains only Arabic letters, not digits or special characters, but all other browsers can handle it well and fall back to using the next font in CSS font stack. Anyone knows how to fix this?

You can have a look at this example, open it in IE8 and you’ll see a colon is not displayed correctly: http://jsbin.com/ofaqiw/1

Mohammad Ashour

unread,

Mar 11, 2013, 3:45:46 AM3/11/13

to early-acc...@googlegroups.com

Hey, saying hello and bumping this topic. I had the exact same issues with Droid Arabic (both Naskh and Kufi) that Bartek reported, namely punctuation showing as squares and no display in IE7.

Mohammad Ashour

unread,

Mar 11, 2013, 3:46:46 AM3/11/13

to early-acc...@googlegroups.com

Also FYI I'm serving with <!doctype html> and <meta charset="utf-8">

Dave Crossland

unread,

Mar 11, 2013, 11:33:10 AM3/11/13

to early-acc...@googlegroups.com

Hi!

On 4 March 2013 03:45, Bartek Stańkowski <art...@gmail.com> wrote:
> 1. Browsers support: Droid Kufi does not work at all in IE7 (not a big
> problem, really) but also on iOS, which is more important. Any ideas why and
> what can I do to make it work?

I'm not sure why it doesn't work in IE7; I'll pick up a XP machine
later today to follow up on this.

It will not work on iOS because iOS only supports complex scripts with
AAT shaping, not OpenType, and the Droid and Noto fonts only have OT
shaping.

> 2. IE8 and some Android versions don’t display special characters and show a
> square instead. If I understand correctly, Droid Kufi contains only Arabic
> letters, not digits or special characters,

Yes

> but all other browsers can handle
> it well and fall back to using the next font in CSS font stack.
>
> Anyone knows how to fix this?

Yes, MSIE8 and earlier will not use the fall back stack for missing
characters; the only fix is to modify the font to include them.

I agree the numbers should be included. Which other 'special
characters' do you think should be included in the font file?

> You can have a look at this example, open it in IE8 and you’ll see a colon
> is not displayed correctly: http://jsbin.com/ofaqiw/1

Thanks - publishing a HTML page so I can reproduce this is ideal!

Cheers,
Dave

Message has been deleted

Bartek Stańkowski

unread,

Mar 13, 2013, 7:40:02 AM3/13/13

to early-acc...@googlegroups.com, da...@lab6.com

Hi Dave,

Thanks so much for feedback. Eventually, we’ve decided to use a different font for some platforms, at least for the time being.

As for missing characters, I’d say all punctuation, apostrophes, &, *, @, #, /, - and © would be useful.

Thanks,

Bartek

Mohammad Ashour

unread,

Mar 13, 2013, 8:45:55 AM3/13/13

to early-acc...@googlegroups.com, da...@lab6.com

Hey David,

Thanks for jumping in on this. Here are my thoughts on special characters that are often needed in Arabic type:

Punctuation

Dot .
Arabic comma ،
Arabic question mark ؟
Exclamation mark !
Colon :
Parenthesis. These are often used for ((quoting)) in Arabic
Angled brackets. Also used for <<quoting>>
Dash -
Mdash —

Miscellany @ #
Arithmetic operators + - * / =
Currency symbols $ £ €, etc.

This is by no means exhaustive, but these are characters I see and use on the web often.

Mohammad Ashour

unread,

Mar 13, 2013, 8:48:10 AM3/13/13

to early-acc...@googlegroups.com

Interestingly, this website is using Droid Kufi with punctuation and it seems to be working: http://www.zaahib.com/_ar/ (even on IE8)

Not sure what they're doing differently, but some insight would help since I'm using Droid for a current project and if there's a quick fix for the IE8 issue I'd love to know about it. /m

Bartek Stańkowski

unread,

Mar 13, 2013, 9:26:43 AM3/13/13

to early-acc...@googlegroups.com

The only thing I see is that they define fonts in a different order than I did. For Arabic text I had font-family: "Droid Arabic Kufi", "Droid Sans"… so Droid Kufi was first, but they have "Open Sans" followed by Droid Kufi.

It looks like IE8 can’t use Arabic letters from Droid Kufi and then fill missing characters with the next font (e.g. Droid Sans),

but it can do it the other way round: use Droid Sans for all text and special characters but switch to Droid Kufi for Arabic letters.

I haven’t really thought about changing fonts order before, but it looks like you have found a fix, Mohammad, so thank you!

Mohammad Ashour

unread,

Mar 27, 2013, 5:56:39 AM3/27/13

to early-acc...@googlegroups.com

That seems to have done it for now. Good catch, I looked at their source but didn't think the font stack order was relevant. Obviously is. Thank you, Bartek.

mouad achemli

unread,

May 18, 2013, 7:42:34 PM5/18/13

to early-acc...@googlegroups.com

use css line-height to resolve this problem

Khaled Hosny

unread,

May 19, 2013, 5:56:01 AM5/19/13

to early-acc...@googlegroups.com

Right. As a general advice, you should always set line-height
explicitly if you want reliable cross-browser, cross-platform line
heights (preferably using font size-dependant units like em).

Regards,
Khaled

> --
> You received this message because you are subscribed to the Google Groups "Google Web Fonts Early Access Discussions" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to early-access-fo...@googlegroups.com.
> To post to this group, send email to early-acc...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/early-access-fonts/b69eaea2-a1f7-415f-8a34-3167d401e36a%40googlegroups.com?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

andreas...@groupon.com

unread,

Jul 30, 2014, 3:40:38 PM7/30/14

to early-acc...@googlegroups.com

There are two problems:

2. IE8 and some Android versions don’t display special characters and show a square instead. If I understand correctly, Droid Kufi contains only Arabic letters, not digits or special characters, but all other browsers can handle it well and fall back to using the next font in CSS font stack. Anyone knows how to fix this?

That is the limitation of FontSquirrel webfont generator. It only supports certain subsets, where unfortunately Arabic characters are not part of it.

To circumvent FontSquirrel you should try various ttf2 converters base on nodejs.. see

woff: https://www.npmjs.org/package/ttf2woff

eot: https://www.npmjs.org/package/ttf2eot

svg: https://www.npmjs.org/package/ttf2svg ( though I had problems with this one the other day. Alternative (Java) is "Batik" project http://xmlgraphics.apache.org/batik/tools/font-converter.html

woff2: https://code.google.com/p/font-compression-reference/wiki/testing_woff2

or use this one program solution: http://fontprep.com/ (the output of some japanese font wasn't good though)

Yazid Erman

unread,

Jan 19, 2016, 2:44:40 AM1/19/16

to Google Web Fonts Early Access Discussions

If someone else has the same problem, You may simply call another font before Droid Kufi, this would definitely fix the problem, This according to my test of the accepted answer in the link: http://stackoverflow.com/questions/25757408/arabic-font-ellipsis-issue-in-ie11

Reply all

Reply to author

Forward