How to embed a custom font to Android app (WebView)

Question

I want to embed a custom font into my android app. I don't use TextView so such tutorials as this one (How to use custom font with TextView) do not help.

In my case, the content is taken from the SQLite database and shown on the screen using WebView. I don't either use bundled HTML files so this tutorial (How to use custom font with WebView) does not solve my problem, either.

FIY, here is my code:

public void initWebview()
{
    WebSettings settings = wvContent.getSettings();
    settings.setDefaultTextEncodingName("utf-8");
    setContentView(R.layout.content);
    wvContent = (WebView) findViewById(R.id.wvContent);
    wvContent.setBackgroundColor(Color.argb(250, 250, 250, 250));
    wvContent.getSettings().setSupportZoom(true);  
    wvContent.getSettings().setBuiltInZoomControls(true);       
    wvContent.setInitialScale(100); 
    wvContent.setWebViewClient(new WebViewClient()

    {
        public void onPageFinished(WebView view, String url)
        {
            if (pd != null)
            {
                pd.dismiss();
                pd = null;
            }
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url)
        {
            Log.i(CONTENT_TAG,"WebView link clicked; url = " + url);
            try
            {
                String arrUrlPart[] = url.split("://");

                if (arrUrlPart[0].equals("entry"))
                {
                    String content = getContentByWord(arrUrlPart[1]);
                    showContent(content);
                }
                else if (arrUrlPart[0].equals("http"))
                {
                     try {                             
                         startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));                              
                     } catch (Exception ex) {
                         // TODO Auto-generated catch block
                         ex.printStackTrace();
                     }                      
                }
            }
            catch (Exception ex)
            {
                ex.printStackTrace();
            }
            return true;
        }
    });
}

The font stored in assets/fonts seems to be embedded into the app, and my questions are:

How can I programmatically do to "force" my app to use this font?
Are there any solutions to my problem?

Thank you very much.

Some guidance here: http://stackoverflow.com/questions/7503133/japanese-characters-looking-like-chinese-on-android — Seva Alekseyev, Feb 11 '12 at 04:36

score 9 · Answer 1 · edited May 23 '17 at 12:14

From the comments in this reply, a possible solution seems to be to use loadDataWithBaseURL while providing the assets folder as the base url, i.e.

LoadData() does not work, but webView.loadDataWithBaseURL("file:///android_asset/",... works fine. Then also font file reference as "/fonts/MyFont.otf" should work. – JaakL Dec 1 '11 at 16:59

I assume bundling your font is not a problem, right?

[Edit] To clarify my answer, I've composed a little example. In the code below, I've put the Quicksand_Dash.otf in assets/fonts, and twitter_logo.png straight into assets. The HTML is simply a string constant, but you'd retrieve it from your SQLLite database. The essence is really just to use loadDataWithBaseURL()....

package oh.jolly.webview;

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

public class WebviewTestActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView webView = (WebView) findViewById(R.id.webview);
        webView.loadDataWithBaseURL("file:///android_asset/", PAGE_HTML, "text/html", "UTF-8", "null" );
    }

    private final static String PAGE_HTML =
        "<html>\n" +
        "  <style type=\"text/css\"> \n" + 
        "   @font-face { \n" + 
        "       font-family: MyFont; \n" + 
        "       src: url(\"file:///android_asset/fonts/Quicksand_Dash.otf\") \n" + 
        "   } \n" + 
        "   body { \n" + 
        "       font-family: MyFont; \n" + 
        "       font-size: medium; \n" + 
        "       text-align: justify; \n" + 
        "   } \n" + 
        "  </style> \n" + 
        "  <body>\n" + 
        "    I've got a sinking feeling...<br>\n" + 
        "    <img src=\"file:///android_asset/twitter_logo.png\" />\n" + 
        "  </body>\n" + 
        "</html>";


}

I don't know if I understand your point, but I have tried [this tutorial](http://stackoverflow.com/questions/3900658/how-to-change-font-face-of-webview-in-android/7395170#7395170) and it works only when text strings requiring the embedded font are between `...` inside HTML files stored in **assets**. However in my case, data is from the SQLite database. Thanks. — Niamh Doyle, Feb 11 '12 at 11:02
Yes. That's why I (and the quoted comment) suggest you use loadDataWithBaseURL (as opposed to loadURL in that tutorial). You still provide the asset url for the fonts, but the html comes from the SQL database. — Paul-Jan, Feb 11 '12 at 11:56
Thanks a lot, Paul. But I can't adapt your example to my code. I guess there is something incompatible on my side. That's why it always show unfixed errors in Eclipse. I'm still trying hard now. — Niamh Doyle, Feb 11 '12 at 15:14
Well, in the end I could get it run but not as what I expected. My app content from its SQLite database is not loaded, but just the sentence **I've got a sinking feeling...** and a logo instead. — Niamh Doyle, Feb 11 '12 at 16:57
Yes, loadDataWithBaseURL("file:///android_asset/" is the solution. Thanks a lot. — hobbs, Aug 13 '12 at 20:31

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

Please check below links ... i think its useful

How to change font face of Webview in Android?

How to use custom font with WebView

Set your custom font on html header and set your content in html body. so all content display as per your embed font in webview...

edited May 23 '17 at 12:30

Community

1
1

answered Feb 11 '12 at 05:32

SBJ

4,089
3
24
27

Many thanks, I have previously tried those but as I said I don't used bundled HTML file so they don't help. – Niamh Doyle Feb 11 '12 at 07:15
you are runtime generate string in which html body and your sqlite content ... not required html file creation. – SBJ Feb 11 '12 at 09:37

How to embed a custom font to Android app (WebView)

2 Answers2

Linked