Android using custom ttf fonts in WebView

July 30, 2013
By

In this article, we will see how to use custom fonts in WebView of Android application.The same strategy can be used to display local language contents in WebView.

This application renders the text in a WebView using Chancery font.

This application is developed in Eclipse 4.2.0 with ADT plugin 22.0.4.


1. Create an Android application with the given below details

Application Name : WebViewCustomFont

Project Name : WebViewCustomFont

Package Name : in.wptrafficanalyzer.webviewcustomfont

Minimum Required SDK : API 8 : Android 2.2 ( Froyo )

Target SDK : API 17 : Android 4.2 ( Jelly Bean )


2. Create a directory “fonts” under “assets” directory


3. Download “Chancery” font and copy to the assets/fonts directory

We can download a “Chancery” font from here


4. Update the layout file res/layout/activity_main.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_world" />

</RelativeLayout>


5. Create an html file assets/demo.html


<html>
    <head>
        <meta http-equiv="content-type" content="text/html;" charset="UTF-8">
            <style>
                /** Specify a font named "MyFont",
                and specify the URL where it can be found: */
                @font-face {
                    font-family: "MyFont";
                    src: url('file:///android_asset/fonts/BLKCHCRY.TTF');
                }
                h3 { font-family:"MyFont"}
            </style>
    </head>
    <body>
        <h3>
            Welcome to CustomFont Demo
        </h3>
    </body>
</html>


6. Update the MainActivity class in the file src/in/wptrafficanalyzer/webviewcustomfont/MainActivity.java


package in.wptrafficanalyzer.webviewcustomfont;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {

    WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Getting reference to WebView of the activity_main layout
        mWebView = (WebView) findViewById(R.id.webview);

        // Loading an html page into webview
        mWebView.loadUrl("file:///android_asset/demo.html");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}



7. Running the application

WebView CustomFont Demo in Action

Figure 1 : WebView CustomFont Demo in Action


8. Download Source Code


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , ,

2 Responses to Android using custom ttf fonts in WebView

  1. ShivSharan on November 18, 2013 at 10:40 am

    Hi George Mathew, Good Example about Webview with custom font…and can you guide me, how can we apply custom font while loading external URl in webview like, yahoo.com

  2. Ali noori on November 30, 2014 at 3:01 pm

    Thank you Thank You Thank You

Leave a Reply to ShivSharan Cancel reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner