Using Arabic fonts with the extension .otf

Question

I'm working on a small project, where the client sent me a font that he wants me to use for the Arabic language. The file extension for the file is .otf

I embedded the file, and tried to use it, and the results were:

• IE8: Didn't recognize the font.
• Chrome: Didn't recognize the font.
• Firefox: Recognized the font, but when viewing it the letters were separated (in Arabic language the letters of the word is connected to each other)

Any idea on how to fix it on Firefox and make IE and Chrome recognize the font type ??

Here is the code is used:

CSS

@font-face {
font-family: Dinar;
src: url("GEDinarTwo-Light.otf") format("opentype");
}

@font-face {
font-family: Dinar;
font-weight: bold;
src: url("GEDinarTwo-Light.otf") format("opentype");
}

#ss {
font-family: Dinar, Arial, Helvetica, Sans-Serif;
}

Many thanks ...

Answer 1

IE doesn't support OTF fonts.

http://webfonts.info/wiki/index.php?title=@font-face_support_in_Internet_Explorer

Answer 2

Try converting the font to TrueType (.ttf) and SVG (.svg), and then use TrueType for IE, and SVG for Safari and Chrome.

You can use FontForge for converting the fonts.

Answer 3

It seems that Arabic font embedding using the @font-face technique does not work at present, I have been trying to have an arabic font deliver on the fly but haven't been able to get it display on web page. Reason, I read somewhere, is that the @font-face does not support accessing the extended character base of fonts.