How to use custom font with WebView

Question

Now I want to display some unicode characters and I have used tag: <font face=" Arial">something here</font>. But it seems that WebView can not find the Arial font because I can only see UFO-characters. Do I have to copy arial.ttf to somewhere or how can I use this TrueType font with WebView? Thanks.

Solution 1

loadData didn't work for me either, so I used file:///android_asset in the src path.

It worked with loadDataWithBaseURL!

For this example I changed the CSS to:

@font-face {
    font-family: 'feast';
    src: url('fonts/feasfbrg.ttf');
}

body {font-family: 'feast';}

Then use the assets path as the base url:

loadDataWithBaseURL("file:///android_asset/",myhtml,"text/html","utf-8",null);

Solution 2

Apparently, you can use a custom font for WebView, as @raychung above suggested. But this won't work for 2.1 (Bug is reported here). This should work for 1.5, 1.6 and 2.2.

You can put your custom font TTF file in your /assets folder, then in your CSS file you can put in:

@font-face { 
    font-family: "myIPA"; 
    src: url('IPA.TTF'); 
}
.phon, .unicode
{
    display: inline;    
    font-family: 'myIPA', Verdana, sans-serif;  
    font-size: 14pt;
    font-weight: 500;
    font-style:normal;
    color: black;
}

You can now reference this font style in your HTML file.

Solution 3

You can get it to work on all versions by copying the font file from your assets to your files folder on the first launch of the app, and then reference it as:

"@font-face {
 font-family: cool_font;
 src: url('file://"+ getFilesDir().getAbsolutePath() 
  + "/cool_font.ttf');
}"

Solution 4

@font-face {
 font-family: 'MyCustomFont';
 src: url('/assets/fonts/MaycustomFont.ttf') 
}

It works for me.

->src
->assets
   ->fonts
      ->MaycustomFont.ttf
->..
->res

Solution 5

I used below code for rtl direction with persian font, hope someone used this code or someone suggest me best way. thanks

            String myCustomStyleString="<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/BYEKAN.ttf\")}body,* {font-family: MyFont; font-size: medium;text-align: justify;}</style>";
                    webView.loadDataWithBaseURL("", myCustomStyleString+"<div style=\"direction:rtl\">"+myHtm+"</div>", "text/html", "utf-8", null);

View more solutions

Comments

[Zarah]

Copying to my files folder still doesn't seem to work for me. The WebView still does not use my font. Is there anything special you did?

[Felipe Martinez Carreño]

Not really, on first launch I check if the file has been copied to the files folder, if not I copy it and then reference it as stated before. File f = new File(getFilesDir(), "coolFont.ttf"); if (f.length() == 0) { InputStream myInput = this.getAssets().open("fonts/coolFont.ttf"); String outFileName = "coolFont.ttf"; OutputStream myOutput = new FileOutputStream(getFilesDir() + "/" + outFileName); byte[] buffer = new byte[1024]; int length; while ((length = myInput.read(buffer)) > 0) { myOutput.write(buffer, 0, length); } myOutput.flush(); myOutput.close(); myInput.close(); }

[Bahadır Yıldırım]

If I place the .ttf and .html file in the same directory and load it up in the Android browser, it works. However in my app's WebView, while the CSS shows, the text appears in Android's default font despite adding the .ttf to the project's assets folder. I'm testing on 2.3.5, but building against 2.1. Could that be the problem, or is there something I'm missing?

[Bahadır Yıldırım]

I haven't been successful in getting this to work, either. Surely enough, my font appears in my app's /data/data/[package]/files directory, and while the WebView is stylized according to the CSS, the text simply doesn't appear in the desired font. I'm building against Android 2.1 and testing on 2.3.5. Any clue what gives?

[Bahadır Yıldırım]

I found a resolution: if you create an HTML file and place it in the assets, loading it via view.loadUrl() works, whereas view.loadData() does not. I have no clue why the latter doesn't.

[Zarah]

Hey @Paul! That's curious. I haven't tried working around this bug for a while now, but when I need to I will try out your workaround. What I did before was to just change the special characters to images in the HTML files.

[Bahadır Yıldırım]

If it's useful, see my more elaborate answer & example.

[Kaiesh]

FYI - This also works if you want to put in multiple different fonts for multiple different languages, I structured mine as follows: font-family: Verdana, sans-serif, language1, language2, language3 ---> although you have to restrict the UTF range of the first two in order to do that.

[Mahendra Liya]

I had problem putting the css in strings.xml. So I created a string constant with the above css value and it was able to show the custom font effect.. Thank you!

[Gaurav Arora]

You just made my day !! :)

[Bobs]

it did not worked for me. I changed the url tp src:url('file:///android_asset/TAHOMA.TTF') and it worked

[Marqs]

Just make sure the font path is correct and it doesn't start with " / " (e.g. '/fonts/feasfbrg.ttf')

[JHawkZZ]

You just made MY day!! Thank you! I was missing the base URL.