How to use custom font with WebView
AndroidWebviewCustom FontAndroid Problem Overview
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.
Android Solutions
Solution 1 - Android
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 - Android
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 - Android
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 - Android
@font-face {
font-family: 'MyCustomFont';
src: url('/assets/fonts/MaycustomFont.ttf')
}
It works for me.
->src
->assets
->fonts
->MaycustomFont.ttf
->..
->res
Solution 5 - Android
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);
Solution 6 - Android
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';}
Solution 7 - Android
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
Solution 8 - Android
As Felipe Martinez Carreño said you can copy from assets and it will work.
You can refer this for more details
Solution 9 - Android
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");
Solution 10 - Android
use css
@font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}