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.

Singapore

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

Theurich

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! – Powel

You just made my day !! :) – Windsucking

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

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

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

Larder

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? – Cissiee

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. – Cissiee

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. – Larder

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

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. – Pincer

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

Answer 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');
}"

Swetlana

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? – Larder

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(); } – Doublequick

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? – Cissiee

Answer 4

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

It works for me.

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

Satisfaction

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

Aureaaureate

Answer 6

It didn't worked for me, I have had to link the font on my web server instead of using the reference to a local file:

   @font-face {
   font-family: 'feast';
   src: url('http://yoursite.com/tutorial/css/feasfbrg.ttf');
}

body {font-family: 'feast';}

Readjustment

Answer 7

This works great for me on all the devices I've tested it on.

Place your font files in /src/main/assets/fonts, then use this method:

public class HTMLUtils {

    public static String getLocalFontInHTML(String html, String fontFamily, String fontFileName) {

      return "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            "<style>" +
            "@font-face {" +
            "font-family: " + fontFamily + ";" +
            "src: url('" + fontFileName + "');" +
            "}" +
            "* {font-family: '" + fontFamily + "' !important;}" +
            "* {font-size: 1rem !important;}" +
            "</style>" +
            "</head>\n" +
            "<body>\n" +
            html +
            "\n" +
            "</body>\n" +
            "</html>";
     }
}

as follows

webView.loadDataWithBaseURL("file:///android_asset/", HTMLUtils.getLocalFontInHTML(item.text, Config.FONT_FAMILY, Config.REGULAR_FONT),"text/html", "UTF-8", null);

where

public static final String FONT_FAMILY = "Montserrat";

public static final String REGULAR_FONT = "fonts/Montserrat-Regular.otf";

Hope it helps someone!

If you want to keep the font size from your html code remove

 "* {font-size: 1rem !important;}"

Have in mind that 1rem is equivalent to about 14sp

Unclassified

Answer 8

As Felipe Martinez Carreño said you can copy from assets and it will work.

You can refer this for more details

Scoundrelly

Answer 9

The basic idea is that the web page should have access to the font file. This is why the suggested original solution works when both the HTML file and the font file are in the assets folder, and the HTML file is loaded from there.

It isn't an Android feature, it's CSS, so should work with any Android SDK.

Loading the font from the files folder should work as well, if the font file is really there and the correct path to it is given in the style. But tho approach is messier, one needs to write code to copy the file, then code to figure out the location of the file.

I am quite happy to simply have the HTML content and the font file in the assets, and loading from there.

webView.loadUrl("file:///android_asset/content.html");

Fabliau

Answer 10

use css

    @font-face {
     font-family: cool_font;
     src: url('cool_font.ttf');
    }

Chrissychrist