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.

score 82 · Answer 1 · edited Sep 18 '12 at 05:43

82

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

edited Sep 18 '12 at 05:43

Mahendra Liya

12,912
14
88
114

answered Sep 19 '11 at 16:03

App8ite

891
6
4

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! – Mahendra Liya Sep 18 '12 at 05:41
1

You just made my day !! :) – Gaurav Arora Jul 01 '13 at 08:59
1

Just make sure the font path is correct and it doesn't start with " / " (e.g. '/fonts/feasfbrg.ttf') – Marqs Nov 23 '15 at 10:32
You just made MY day!! Thank you! I was missing the base URL. – JHawkZZ May 21 '20 at 00:13

score 34 · Answer 2 · answered Jan 29 '11 at 11:08

34

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.

answered Jan 29 '11 at 11:08

Zarah

5,179
2
29
29

2

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? – Paul Lammertsma Sep 12 '11 at 21:14
1

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. – Paul Lammertsma Sep 12 '11 at 22:03
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. – Zarah Sep 13 '11 at 01:25
1

If it's useful, [see my more elaborate answer & example](http://stackoverflow.com/questions/3900658/how-to-change-font-face-of-webview-in-android/7395170#7395170). – Paul Lammertsma Sep 13 '11 at 09:07
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. – Kaiesh Jul 09 '12 at 10:31
it did not worked for me. I changed the url tp `src:url('file:///android_asset/TAHOMA.TTF')` and it worked – Bob Aug 19 '13 at 06:20

score 3 · Answer 3 · answered Aug 14 '13 at 07:56

3

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

It works for me.

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

answered Aug 14 '13 at 07:56

Benna

79
1

score 3 · Answer 4 · answered Oct 08 '16 at 20:08

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

score 3 · Answer 5 · answered Feb 11 '11 at 08:56

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

answered Feb 11 '11 at 08:56

Felipe Martinez Carreño

156
3

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? – Zarah Mar 02 '11 at 06:42
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(); }` – Felipe Martinez Carreño Jul 05 '11 at 09:15
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? – Paul Lammertsma Sep 12 '11 at 21:20

score 2 · Answer 6 · answered Jan 11 '18 at 15:01

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

score 2 · Answer 7 · answered Aug 31 '11 at 09:52

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

score 1 · Answer 8 · edited May 23 '17 at 10:31

1

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

You can refer this for more details

edited May 23 '17 at 10:31

Community

1
1

answered Mar 24 '11 at 10:37

binary

1,364
1
15
20

score 1 · Answer 9 · answered Sep 13 '11 at 13:38

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

score 0 · Answer 10 · edited May 04 '11 at 15:48

0

use css

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

edited May 04 '11 at 15:48

Ahmad Kayyali

8,233
13
49
83

answered May 01 '10 at 17:30

raychung

1

How to use custom font with WebView

10 Answers10

Linked

Related