CODEWITHSUNDEEP
androidhtmlcssfontswebview
mehdok
mehdok

Reputation: 1608

persian font not applied in android WebView

I have html content (combined Persian an English text) with attached css, all css style applied correctly but font.

The css have fontface like this:

@font-face{
        font-family: 'BYekan';
        font-weight: normal;
        font-style: normal;
        src: url(../Fonts/BYekan.ttf); 
    }

the font only applied to english text and not the persian. the font is a standard ttf persian font (BYekan.ttf) so nothings wrong with it.

I googled a lot and almost every body said it's a bug in WebView android > 3.0, the problem still exist in android 4.

https://code.google.com/p/android/issues/detail?id=38536 https://groups.google.com/forum/#!topic/persian-computing/4Fm7JfiOkJk

The only workaround that I found is using svg fonts instead, but this does not work for me either. Custom font for webview

So how can I solve this?

note1: this question probobly asked alot, like this:
Persian @font-face doesn't work in Chrome, Bug or not?
but it's an old question and the given advice not working anymore (at least for me).

note2: When I open the page in chrome desktop browser font applied correctly.

Upvotes: 3

Views: 1553

Answers (2)

MRS1367
MRS1367

Reputation: 1053

I've converted the mentioned font in your question and uploaded it in the following Internet address:

bYekan Web Font Package

Also, You must use the following Style Lines:

@font-face {
    font-family: 'BYekan';
    src: url('../Fonts/byekan-webfont.eot');
    src: url('../Fonts/byekan-webfont.ttf') format('truetype'), url('../Fonts/byekan-webfont.eot?#iefix') format('embedded-opentype'), url('../Fonts/byekan-webfont.woff') format('woff'), url('../Fonts/byekan-webfont.svg#BYekan') format('svg');
    font-weight: normal;
    font-style: normal;
}

and, you should add the following lines in the .htaccess file:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Upvotes: 0

Maveňツ
Maveňツ

Reputation: 1

i have found the workaround

try these font faces 

@font-face {
font-family: 'yekan’;
src:url('fonts/yekan.eot?#’) format(‘eot’),    
      url('fonts/yekan.woff') format('woff'),
      url(‘fonts/yekan.ttf’) format(‘truetype’); 
}

IMO use SVG font for persian language

Upvotes: 1

Related Questions