1

I had created mobile web app using jQuery Mobile framework. I also added some external Arabic font to my .css file. When I test webpage in desktop browser like Chrome, Firefox etc. it's working well. But when I test webpage in Mobile Safari on my iPod touch it's not working, it still shows default font...

My CSS is:

@font-face {
    font-family: 'Amiri-Bold';
    src: url('amiri-bold.eot');
    src: url('amiri-bold.eot?#iefix') format('embedded-opentype'),
         url('famiri-bold.woff') format('woff'),
         url('amiri-bold.ttf') format('truetype'),
         url('amiri-bold.svg#amiri-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-size:16px;
    font-family:Amiri-Bold;
}

And my HTML is:

<h1>يبييبي يب يب يبب</h1>
Lebyrt
  • 1,376
  • 1
  • 9
  • 18
mans
  • 1,087
  • 4
  • 26
  • 44

3 Answers3

0

I see on http://www.amirifont.org/ he use the "lang" attribute in html:

<div lang="ar">
    <p>some arabic text</p>
</div>

<div lang="en">
    <p>english text</p>
</div>

[UPDATE]

1. There may be something to check with unicode-bidi

"The unicodeBidi property is used with the direction property to set or return whether the text should be overridden to support multiple languages in the same document."

/*I've have not tested this one */
arabic-text {
    direction: ltr;
    unicode-bidi: embed;
}

http://reference.sitepoint.com/css/unicode-bidi

http://www.quackit.com/css/properties/css_unicode-bidi.cfm

http://www.w3schools.com/jsref/prop_style_unicodebidi.asp

2. There may be something to check with the charset, take a look at this discussions about modern arabic script (some people use of utf16 for some cases)

What character encoding should I use for a web page containing mostly Arabic text? Is utf-8 okay?

Is UTF-8 enough for all common languages?

3. Try to use google font to see if the problem comes from access

http://www.google.com/webfonts/earlyaccess

Community
  • 1
  • 1
kirkas
  • 1,749
  • 2
  • 12
  • 22
0

It seems that iOS does not support OpenType fonts for complex scripts: https://bugs.webkit.org/show_bug.cgi?id=92586, and Amiri is an OpenType font. The Arabic fonts shipped by Apple are AAT fonts and that is probably why they work fine.

See also this related discussion: https://discussions.apple.com/thread/5281738

خالد حسني
  • 250
  • 1
  • 7
0

You want to use SVG on mobile safari. I was working on this very thing this weekend.

imaginethepoet
  • 864
  • 6
  • 14