How to change font face of Webview in Android?

android webview font-face custom-font
Dhanika picture Dhanika · Oct 10, 2010 · Viewed 98.2k times · Source

I want change the default font of webview to a custom font. I'm using webview in developing an bilingual browser app for Android.

I tried getting an instance of custom typeface by placing my custom font in assets. But still couldn't set webview's default font to my font.

This is what I tried:

Typeface font = Typeface.createFromAsset(getAssets(), "myfont.ttf"); 
private WebView webview;
WebSettings webSettings = webView.getSettings();
webSettings.setFixedFontFamily(font);

Can anyone correct this or suggest any other method to change webview's default font to a custom font?

Thanks!

Answer

Paul Lammertsma picture Paul Lammertsma · Sep 13, 2011

There's a working example of this in this project. It boils down to:

  1. In your assets/fonts folder, place the desired OTF or TTF font (here MyFont.otf)

  2. Create a HTML file that you'll use for the WebView's content, inside the assets folder (here inside assets/demo/my_page.html):

    <html>
<head>
<style type="text/css">
@font-face {
    font-family: MyFont;
    src: url("file:///android_asset/fonts/MyFont.otf")
}
body {
    font-family: MyFont;
    font-size: medium;
    text-align: justify;
}
</style>
</head>
<body>
Your text can go here! Your text can go here! Your text can go here!
</body>
</html>

  3. Load the HTML into the WebView from code:

    webview.loadUrl("file:///android_asset/demo/my_page.html");

Take note that injecting the HTML through loadData() is not permitted. As per the documentation:

Note that JavaScript's same origin policy means that script running in a page loaded using this method will be unable to access content loaded using any scheme other than 'data', including 'http(s)'. To avoid this restriction, use loadDataWithBaseURL() with an appropriate base URL.

As @JaakL suggests in the comment below, for loading HTML from a string, you should instead provide the base URL pointing to your assets:

webView.loadDataWithBaseURL("file:///android_asset/", htmlData);

When referencing the font in htmlData, you may then simply use /fonts/MyFont.otf (omitting the base URL).

Related questions

Android Calling JavaScript functions in WebView

I am trying to call some javascript functions sitting in an html page running inside an android webview. Pretty simple what the code tries to do below - from the android app, call a javascript function with a test message, …

Read More
Android Webview - Webpage should fit the device screen

I have tried the following to fit the webpage based on the device screen size. mWebview.setInitialScale(30); and then set the metadata viewport <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=…

Read More
File Upload in WebView

I have been struggling to upload files from WebView since last few days and there is no progress. I googled and implemented all suggested solutions but none works, like: solutions suggested here, and so on. Problem: I have a HTML …

Read More