Google font shows boxes in Internet Explorer 8 - IE 8

Question

I am using below line in css:

font-family:  'Droid Arabic Naskh';

and following code to my php header file:

<link href='//fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css' />

There is no problem in FireFox, but in IE8, it shows boxes for some characters like ) / ,

How can i fix the problem?...Many thanks.

I cannot reproduce the issue in IE 11 in IE 8 simulation mode. Can you test what happens if you set e.g. `font-family: Georgia, 'Droid Arabic Naskh'` instead? — Jukka K. Korpela, Nov 08 '14 at 15:56
@JukkaK.Korpela, It's an improvement, because it shows charcaters (like /) with `Georgia` font first, and for those characters missing in `Georgia` (like specific arabic letters) use second `Droid Arabic Naskh`. But i like to use just one font family. please put the comment as answer. if there is no better solution, i'll select it as answer. — Amir, Nov 09 '14 at 07:43

score 1 · Accepted Answer · answered Nov 09 '14 at 14:14

This seems to be a bug in some version(s) of IE. The Droid Arabic Naskh font does not contain any Ascii characters except the space, so a browser is forced to use fallback fonts, and IE is known to have problems with this.

To circumvent the bug, select a font that you wish to use for Ascii characters like )/, and generally for characters not covered by Droid Arabic Naskh (which seems to contain only Arabic characters, in addition to the space and the no-break space), and put that font before Droid Arabic Naskh in the font-family value. (This does not cause a mix of fonts; it controls it, since a mix is unavoidable, and you get a known font instead of browser default.)

Example:

body { font-family:  Georgia, 'Droid Arabic Naskh'; }

Georgia is just an example here. You can use various fonts and even a list of fonts there, to deal with the issue that different devices have different sets of fonts. But you should select only fonts that do not contain Arabic characters, because if you do, they will be taken from that font and not Droid Arabic Naskh.

On the other hand, Google describes the font on its page about its Early Access fonts as follows: “Designed to complement the Latin, Greek and Cyrillic provided in the Droid Serif family, the Arabic matches the color, alignment and design detail of the Droid Serif allowing them to be used together for multi-lingual typesetting.”

This means that the font is more or less meant to use together with Droid Serif, from the common Google fonts. So it might be a good idea to use Droid Serif as the first font.

There is a problem, however, with line heights. The default line height for Droid Arabic Naskh tends to be much larger than for Droid Serif. This causes uneven line spacing in a paragraph that contains text in both fonts. To fix this, set a common line height. In the example below, it has been set to 1.4, which is relatively large for text in Latin letters, but for dominantly Arabic text you might consider using an even larger value.

<!DOCTYPE HTML>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' 
  rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css'
  rel='stylesheet' type='text/css' />
<style>
body { font-family: 'Droid Serif', 'Droid Arabic Naskh';
       line-height: 1.4;
}
</style>
السلام عليكم, let is now test “()/,”.
Here you should see even line spacing, even though the
text contains Arabic words like فن الخط in the middle of text in Latin letters. Note that all non-Arabic characters except space are from Droid Serif here.

Google font shows boxes in Internet Explorer 8 - IE 8

1 Answers1