Arabic TTF (TrueType font) in UIWebView iOS 4.2.1

Question

Hi I want to use custom arabic font in UIWebView, I read that iOS 4.2 onwards we can use TTF webfonts.

I have arabic font in my resources and following is the code I am using:

<html>
    <head>
        <title>@font-face Demo</title>
        <style type="text/css">
            @font-face {
                font-family: 'me_quran Regular';
                src: local('me_quran Regular'), 
                            local('me_quran'), 
                            url('me_quran.ttf') format('truetype');

            }


            h1, p {
                font-family: 'me_quran Regular';
            }
            h1 {
                font-size: 45px;
            }
            p {
                font-size: 18px;
                line-height: 27px;
            }
            #container{
                width: 800px;
                margin: 0 auto 0 auto;
            }

            }

        </style>
    </head>
    <body>
        <div id="container">
            <h1>بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </body>
</html>

The problem is: I am getting the arabic text in UIWebView but its not the one I loaded, its the default arabic font iOS uses.

Help me out! Note: I have tested many English TTF, they all are working fine with iOS 4.2.1.

Thanks a lot for the great sample code at @font-face !! – Fattie Jul 04 '16 at 15:10 — Fattie, Jul 04 '16 at 15:10

score 2 · Accepted Answer · answered Jun 05 '11 at 12:02

2

Hi I finally figured it out. You can load almost all (.ttf) fonts, either arabic, english or whatever on iOS 3.2 above. You just need to use the correct text (in terms of unicode), to display it.

answered Jun 05 '11 at 12:02

Asymptote

1,140
2
13
29

What do you mean "correct text"? If we have arabic text as unicode text, then arabic font should work on that text. – Mustafa Sep 13 '11 at 07:55
@Mustafa yes you are right! what I was trying to say was that the unicode of text should match the "unicode mapping" the font file has. Also it's for iOS 4.0+ The following is the app I used the custom font: http://itunes.apple.com/us/app/the-quran-kareem/id455209658?mt=8 – Asymptote Sep 14 '11 at 06:53
Mashallah, you have a beautiful application. I'm not having any luck with using _custom arabic font_ with unicode arabic text. I've tried to use UILabel, UITextView, UITextField, and CoreText, for different arabic fonts. Can you please help me out? I'm not sure what i'm missing. https://devforums.apple.com/message/532738#532738 – Mustafa Sep 14 '11 at 08:12
Thanks, IOS does not support Opentype. *It is supposed to support AAT, but has some bugs for Arabic to make it not usable.* Do you want to render arabic text with dialects also? There are some workarounds to make it work on iOS. Having said that (the first step should be that) you need to match the unicodes of your text with unicodes mapping in your font, if this is fine and still the font isnt loading then (as i've stated) (I guess) you are hitting the wall (the problem with iOS). – Asymptote Sep 14 '11 at 10:42
1

I've tried both TTF and OTF fonts. I'm not familiar with AAT. I want to show the arabic text just like in your application (with Arabic diacritics). Which UI control and font have you used? How can i check that my unicode text match with the unicode mapping in the font. p.s. I've tried me_quran (ttf) font as well. – Mustafa Sep 14 '11 at 14:35
I've uploaded my sample project here: http://db.tt/1jD0zhI I would appreciated if you can take a look and post your comments. Thanking in anticipation. – Mustafa Sep 14 '11 at 14:45
I have contact information on my profile, let's stop this comments thread. Let me take a look, I'll let you know. Just ping me on my email address. Thanks – Asymptote Sep 15 '11 at 12:07
I don't see contact info on your profile. My email is ghulam(dot)mustafa(at)yahoo(dot)com. I appreciate you looking into this. – Mustafa Sep 15 '11 at 14:35
Jut FYI, I ended up using Core Text framework to get the desired results. You can check my solution in this other stackoverflow thread: http://stackoverflow.com/questions/7441238/arabic-text-with-custom-fonts-in-ios – Mustafa Aug 02 '12 at 05:53
@Asymptote First of all I'd like to commend you for the beautiful work you've done with your app. I too have just recently released a Quran app (https://itunes.apple.com/us/app/iqra!-by-yazid/id672993057?ls=1&mt=8), though there are some outstanding font issues which I still hope to address. I was wondering whether you'd be open to lending some help and discussing some implementation details (FYI, I used iOS 6's `NSAttributedString` to display custom arabic fonts in mine). – Yazid Aug 02 '13 at 23:17

Arabic TTF (TrueType font) in UIWebView iOS 4.2.1

1 Answers1

Linked