Thaana font on mobile web browsers [duplicate]

Question

This question already has answers here:

Is @font-face usable now? (2 answers)

Closed 8 years ago.

I'm working with fonts for a small language called Dhivehi (Maldivian). The alphabet is called "Thaana". There are a number of Unicode fonts available for it (such as Microsoft's MV Boli). It is written right-to-left. While it appears perfectly on web browsers on laptops, it does not appear correctly on mobile-phone based browsers.

I'm using the following CSS code to apply the fonts:

@font-face {
font-family: 'Eamaan';
src: url('http://www.sun.mv/css/MvEamaanXP.ttf') format('truetype');
}

.thaana{direction:rtl; float:right; unicode-bidi: bidi-override;font-size:16pt;
                float: left;font-family:"Eamaan"; padding:2%;}

For my HTML, I'm using the following:

<p class="thaana">މިއީ ހަމަ ރަގަޅު ކަމެކެވެ</p>

And this produces legible writing on a web browser, however it doesn't work at all (for me) on any mobile-phone based browsers.

Any help would be appreciated.

Answer 1

I wonder if the issue is the use of true-type fonts. Chrome (Blink) and WebKit browsers (Android stock) are supposed to support true-type, yet when I run this code in Chrome on my desktop I don't see Eamaan getting rendered.

This site uses Waheed and they're using the open-type font version which renders in Chrome fine. If the open-type font of Eamaan is available in the URL of your font-face rule, I'd suggest adding it.

Example:

@font-face {
    font-family: 'Eamaan';
        src: url('http://www.sun.mv/css/MvEamaanXP.ttf') format('truetype'),
            url('http://www.sun.mv/css/MvEamaanXP.otf') format('opentype');
}

You may want to expand it further to include .eot, .woff, and .svg for full support for font-face:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff') format('woff'), /* Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}