CODEWITHSUNDEEP
androidfontswebview
haythem souissi
haythem souissi

Reputation: 3273

Custom font for webview

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.

Upvotes: 8

Views: 19203

Answers (6)

user3921740
user3921740

Reputation: 550

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

Upvotes: 3

user3008032
user3008032

Reputation: 112

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>

Upvotes: 0

James Holderness
James Holderness

Reputation: 23001

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.

Upvotes: 11

Vikram
Vikram

Reputation: 51571

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).

Upvotes: 4

WebViewer
WebViewer

Reputation: 811

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.

Upvotes: 2

user1071762
user1071762

Reputation: 685

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);

Upvotes: -3

Related Questions