8

I am trying to establish a new custom font (otf file) for my web view.

I put anbaaarabic_bold.otf in assets file.

There is how i do:

String head = "<head><style>@font-face {font-family: 'verdana';src: url('file://"+ getActivity().getFilesDir().getAbsolutePath()+ "/anbaaarabic_bold.otf');}body {font-family: 'verdana';}</style></head>";
String htmlData= "<html>"+head+"<body style=\"font-family: verdana\">"+body+"</body></html>" ;

mBodyArticle.loadDataWithBaseURL("http://nada", htmlData,
                    "text/html", "utf-8", "");

body : contain my html code.

I don't know why the font is not working for my webview. body html font doesn't change.

haythem souissi
  • 3,263
  • 7
  • 50
  • 77
  • I have a question for you???are you trying to load only a particular page or you want all the pages to be in the custom font format? – Ankit Srivastava Aug 14 '13 at 10:19

6 Answers6

11

There is a bug report for Android that seems to suggest that custom fonts don't work for certain languages (Thai, Hebrew, Farsi, and Arabic have been mentioned). This hasn't been confirmed by anyone from Google, but there are a number of people reporting the same problem.

One of the suggested solutions (which at least one user confirmed as working) was to convert the font from otf to svg. There are a number of online tools that will do this for you (Everything Fonts is one example), but you may have issues with this being a copyrighted font - make sure your font license permits such conversions.

Also, when you have converted the font, open it up in a text editor and check whether the svg element is namespaced. It should look something like this:

<svg xmlns="http://www.w3.org/2000/svg">

If it is just <svg> without the namespace, you may need to add the xmlns attribute manually. Apparently, svg fonts without the namespace don't work either.

James Holderness
  • 22,721
  • 2
  • 40
  • 52
4

To get URI for a file placed in /assets folder, you will need to use:

file:///android_asset/file_name

Try the following code:

String head = "<head><style>@font-face {font-family: 'verdana';src: url('file:///android_asset/anbaaarabic_bold.otf');}body {font-family: 'verdana';}</style></head>";
String htmlData= "<html>"+head+"<body style=\"font-family: verdana\">"+body+"</body></html>" ;

mBodyArticle.loadDataWithBaseURL("http://nada", htmlData,
                "text/html", "utf-8", "");

Make sure that you use the exact file name (case-sensitive).

Vikram
  • 51,313
  • 11
  • 93
  • 122
  • @haythemsouissi Can you post the `anbaaarabic_bold.otf` file link? I tested this code successfully before posting the answer. – Vikram Aug 14 '13 at 17:46
  • @haythemsouissi Thanks, I'll try using this font and get back to you. – Vikram Aug 14 '13 at 18:44
  • @haythemsouissi It is working fine for me. I used `String body = "

    لوحة المفاتيح العربية

    ` with the code above and the output was as expected. Here's a screenshot: http://ge.tt/2Io16uo/v/0?c
    – Vikram Aug 14 '13 at 19:09
  • no this is not working, this is the default font. The font we are using must be more bold and have a different look – haythem souissi Aug 14 '13 at 23:56
  • 1
    @haythemsouissi You are right. This ain't working. I confirmed this by setting your font to a TextView and the difference was clear. I tried another custom font(Small caps) in the WebView, and it was rendered successfully. Not sure why your font isn't working. – Vikram Aug 15 '13 at 06:48
  • can you please send me Smallcaps font? is this an arabic font? Maybe Webview doesn't has full support of arabic? What do you think? – haythem souissi Aug 15 '13 at 09:21
  • 1
    @haythemsouissi Here's a link to [SmallCaps font](http://ge.tt/7ZJm3uo/v/0?c). It is not an arabic font though. I just wanted to confirm if some other font would work. And it did. The problem seems to be with arabic fonts. You might have to try a few different arabic fonts to see which one works best for you. – Vikram Aug 15 '13 at 09:32
  • @JamesHolderness Deleted the file. Thanks for the heads up. – Vikram Aug 15 '13 at 16:27
3

This is an Example for how to set typeface for webview using html. In this view set the typeface in HTML String and load with webview. Put the font in assests folder.

enter image description here

Every android device having default font .By using typeface is required to give your application look and feel good.CLICK HERE to know more about typeface

Step :1 create a new Android application project and copy these code into xml file activity_main.xml: ]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <WebView
        android:id="@+id/webViewFace"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Step :2 create an MainActivity.java in the src folder and copy these code

package com.androidtoppers.typeface;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

 WebView mWebView;


 String htmlstr1="<p style='text-align:right'><H2>Android Toppers</H2></p> <p style='text-align:left'>It is safer to use a JSON parser to convert a JSON text to a JavaScript object.</p>";
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activtiy_main);

  mWebView = (WebView) findViewById(R.id.webViewFace);
  mWebView.setWebViewClient(new WebViewClient() {

   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // TODO Auto-generated method stub
    view.loadUrl(url);
    return true;
   }
  });
   String head1 = "<head><style>@font-face {font-family: 'arial';src: url('file:///android_asset/fonts/bichkam.ttf');}body {font-family: 'verdana';}</style></head>";
   String text="<html>"+head1
     + "<body style=\"font-family: arial\">" + htmlstr1
     + "</body></html>";

   mWebView.loadDataWithBaseURL("", text, "text/html", "utf-8", "");

 }

}

for more details refer this link : http://velmuruganandroidcoding.blogspot.in/2014/08/set-typeface-for-webview-in-android.html

user3921740
  • 520
  • 6
  • 7
2

Is your phone running Android 2.1 by any chance?

There is a known bug in 2.1. As a result, custom fonts won't work for 2.1. But this should work for 1.5, 1.6 and 2.2.

You can find more information here.

Community
  • 1
  • 1
WebViewer
  • 761
  • 7
  • 21
0

Try this link

 <title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <style type="text/css">@font-face {font-family: MyCustomFont; src: 

url(file:///android_asset/Bamini.otf)}body {font-family: MyCustomFont, Verdana, Arial, 

sans-serif; font-size: medium; color: black}</head><body>

<h1>tamilStringEncoded </h1></body></html>
user3008032
  • 112
  • 12
-3

I guess getActivity().getFilesDir().getAbsolutePath() doesn't get you into assets folder where your font resides, so the change of font is just ignored as it's not found When I was using custom fonts I used the path this.getAssets() + "your_font_name.otf"

The code I used:

Typeface type = Typeface.createFromAsset(this.getAssets(), fontName);
((TextView) findViewById(R.id.textView1)).setTypeface(type);
user1071762
  • 625
  • 1
  • 9
  • 14