How to use custom font with WebView

62
votes

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.

10
androidwebviewcustom-font

10 Answers

82
votes

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);
34
votes

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.

3
votes

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');
}"
3
votes
@font-face {
 font-family: 'MyCustomFont';
 src: url('/assets/fonts/MaycustomFont.ttf') 
}

It works for me.

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

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);
2
votes

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';}
2
votes

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

1
votes

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

You can refer this for more details

1
votes

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");
0
votes

use css

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