Android WebView does not support rendering Persian fonts

I am having an issue with applying a Persian font to my html content, which contains both Persian and English text. The CSS is correctly applied except for the font itself.

In the CSS, I have defined the font-face like so:

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

The font is only being applied to the English text and not the Persian text. The font I am using is a standard ttf Persian font (BYekan.ttf) so there should be no issues with it.

After doing some research, it seems that many people attribute this problem to a bug in WebView on Android versions greater than 3.0, and the issue still persists on Android 4.

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

The only solution that I've come across is to use svg fonts instead, but unfortunately, this has not worked for me either. Custom font for webview

So, how can I resolve this issue?

Note1: This question has likely been asked before, such as here:
Persian @font-face doesn't work in Chrome, Bug or not?
However, it's an older question and the suggested advice no longer seems to work (at least for me).

Note2: When I view the page in the desktop version of Chrome, the font is applied correctly.

androidhtmlcssfontswebview

Answer №1

After some experimentation, I have discovered a solution

Experiment with these font styles

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

In my opinion, consider using SVG fonts for Persian text

Answer №2

I have successfully converted the font mentioned in your query and it is now available for download at the following URL:

Click here to download the bYekan Web Font Package

Don't forget to apply the following Style Lines to properly use the font:

@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;
}

Additionally, ensure you add the following lines to your .htaccess file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery scroll animation not reaching the intended position when scrolling upwards

While developing a new feature for my music player, I encountered an issue with centering the track/div upon clicking in the scrollable parent div. Sometimes it doesn't scroll to the center as intended and instead scrolls erratically to the top of the ...

jqueryhtmlcss

Pagination displays identical data on each page

When utilizing pagination in my AngularJS application to display search results fetched from an API call, I encountered an issue where the same data set appears on all pages. Here's what I have attempted: Within the Controller $rootScope.currentPag ...

htmlangularjspaginationcontroller

Issues with CSS Min-Height in Various Web Browsers

Lately, I've been working on a website and trying to create a border that surrounds all my content and extends the full length of the page. The #Container div is supposed to expand to fill the entire page. I've tried using min-height:100%; in my ...

htmlcss

Enable CDATA support in ActionView::Base.full_sanitizer

One method I found helpful was using the ActionView::Base.full_sanitizer.sanitize(value) to remove HTML content. It generally works well, but there is an issue when the value passed into the method is wrapped in because it returns a blank ...

htmlruby-on-railsrubycdata

What is the best way to use jQuery to access dynamic HTML elements?

I have created a dynamic table that allows users to add and delete rows. However, I am facing an issue with accessing the information inputted by the users for calculations because it seems to be inaccessible once dynamically added to the page. Below are ...

jqueryhtmldynamic

What is the process for creating a global variable in JavaScript?

Having trouble changing the value of "invocation_num" within a loop? I attempted to modify it as follows, but ended up with an undefined value. Any help would be greatly appreciated. $(document).on("click", '.favoret', function(){ document ...

javascriptjqueryhtmlcss

Creating an HTML form that spans across multiple pages: Tips and tricks

When creating a shopping form that includes items like mugs and tshirts, is it permissible according to website standards to design a form that spans multiple pages? One option could be to add radio buttons for choosing a color directly on the main form ...

htmlforms

"Triggering CSS changes with the click of a

I am developing a basic calendar application in PHP and I would like to dynamically change the style of the <td> block based on user interactions. Specifically, I want to implement a behavior where once the "menuclick" class is active, the other cl ...

phpjavascripthtmlcssclass

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF using a hidden canvas element. How ...

javascriptcsscanvassvgcanvg

When the flexDirection is set to row, Material-UI input labels will appear outside of

Currently, I am facing an unusual situation. In my code, I have incorporated 2 div elements within a FormControl, and everything appears to be working correctly with the input label for the Select. However, when I apply styling with flexDirection: 'ro ...

cssreactjsmaterial-ui

What is the best way to trigger a function when a button is enabled in Angular 8?

Here is a portion of my sign-in.component.html file. I have created a function in the corresponding sign-in.component.ts file that I want to trigger when the button below becomes enabled. Here is an example of what I am trying to achieve: <div class= ...

javascripthtmlangularangular8

"Rotated element in Opera does not maintain event functionality when positioned outside its

Make sure to test this example on Opera (version 12.02) by clicking this link. In Opera, try clicking the red box inside the blue box (event is triggered), then click the red box outside the blue box (event isn't triggered). The container must have p ...

cssrotationopera

PHP form headaches: issues with submitting and posting

I'm having trouble with the submit button in my PHP code. Here's what I have so far (it's for a website where users can rate things): <form method="POST> <input type="radio" name="person" value="1" /> <input type="radio" name ...

javascriptphphtmlforms

Wrapping text around an image using two distinct Angular components

Can text wrap around an image in Angular even if they are in separate components? Or do the text and image have to be within the same component for this to work, regardless of whether the image is on the left or right side? https://i.stack.imgur.com/hdlxD ...

cssangular

Sorting of boxes is not possible when utilizing the sortable() function

Is there a way to swap the positions of the left and right boxes using the sortable() function from jQuery UI? It seems to work fine for numbers 1 and 2, but not for switching the boxes. $(".sort-me").sortable({ connectWith: ".connectedSortable" } ...

htmljquerycssjquery-ui

Exploring the world of flexbox and experimenting with implementing flex-wrap at a specific breakpoint

I am working on a layout that includes a module containing various content. My goal is to have the progress bar, along with the labels "parts" and "projects," positioned underneath an image and expand to the full width of the module when the window size go ...

cssflexboxtailwind-css

Exploring the world of interactive storytelling through a basic PHP text adventure

I recently completed coding a text adventure using functions like fgets(STDIN) that works in the command line. Now, I want to convert it to run on HTML (internet browser) but I'm facing a challenge. I am unsure how to transition from this: $choose=0; ...

phphtmlfunction

Incorporate a background image into input fields with Autofill on mobile browsers to override the default yellow background that obscures them

It is common knowledge that modern browsers apply a less than appealing yellow background to text fields when Autofill is used by visitors. A helpful workaround is known to override the default text and background colors, and even incorporate a background ...

htmlcssmobilewebkitautofill

Ways to center text vertically within a cell in a Bootstrap 5 table

I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements. ...

htmlcsstwitter-bootstrapbootstrap-5

Using regular expressions in Python with PyQt4 to eliminate anchor tags from HTML links in text

When using my QTextBrowser, I am able to identify links such as "www.test.com" with the following regular expression: re.compile( r"(\b(?:(?:https?|ftp|file)://|www\.|ftp\.)[-A-Za-z0-9+&@#/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#/%=~_()|])" ...

pythonhtmlregex