I am loading CSS from Asset folder. It’s working fine except font loading. I am getting following error while leading font.
"Failed to decode downloaded font: file:///android_asset/css/seriff.ttf"
Here my code,
#font-face {
font-family: 'MyFont';
src: url('seriff.ttf');
}
body {
font-family: 'MyFont';
background-color: #FFBB00;
}
content = "<html><head><link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\"><body>" + "Testing something" + "</body></html>";
newsView.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "utf-8", null);
Other CSS property is working fine. Please help if anyone have idea to fix this.
Thanks.
use relative path to the font
src: url('../fonts/seriff.ttf');
and to the css
href=\"./css/style.css\"
It is likely that your ttf font is not compatible with the Android WebView. To confirm this replace your seriff.ttf file with another ttf file and see if it is displayed correctly.
You can use a ttf converter to read in the font then write it back out it should fix the issue. A site such as freefontconverter.com will help with this task.
Related
I create application for android with phonegap.
Front-end of app designed with html, css and javascript. I have font folder under assets folder in project and use #font-face in css file for applying font.(My font is persian)
When the section of design of project (html,css,js) run in browser is true and fonts apply.
When project android compile this fonts don't apply for text but apply for numbers.
Please help me.
Thanks for your help.
Add your font.ttf in assets folder of your android application.
Then, For Example,
CODE
wv = (WebView) findViewById(R.id.webView1);
String st = "<html><head><style type=\"text/css\">#font-face {font-family:MyFont;src: url(\"file:///android_asset/font/font.ttf\")}body {font-family:MyFont;font-size: medium;text-align: justify;}</style></head><body>";
String ed = "</body></html>";
String myHtmlString = st + YourText + ed;
wv.loadDataWithBaseURL(null,myHtmlString, "text/html", "UTF-8", null);
Put your fonts in directory called "fonts" under your PhoneGap www folder.
Using CSS include your fonts like this (I have used Roboto Fonts here in this example):
#font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(../fonts/RobotoCondensed-Regular.ttf) format('truetype');
}
Wherever you want to apply Roboto fonts, apply like this in css: i.e.
font: 400 1.25em/45px 'Roboto Condensed', sans-serif;
Note that, For Android Version greater than 4 it can Use bundled Fonts.
However for Android Version < 4 need to download fonts From Web like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
Hope this helps..
I am having trouble getting the #font-face to work. It is displaying fine in all browsers apart from IOS and android.
I have gone through the http://www.fontsquirrel.com to get the following code:
#font-face { font-family: 'philly_sansregular';
src: url('phillysansps-webfont.eot');
src: url('phillysansps-webfont.eot?#iefix') format('embedded-opentype'),
url('phillysansps-webfont.woff') format('woff'),
url('phillysansps-webfont.ttf') format('truetype'),
url('phillysansps-webfont.svg#philly_sansregular') format('svg');
}
I have also added the following to my .htaccess file in the root:
AddType image/svg+xml svg
AddType image/svg+xml svgz
Can anyone help?
The website in question is enter link description here
I found the answer: I had not specified the correct url. For some reason it was pointing to a different location so I had to use the full URL. Also I found out that the reason it wont work properly on android and iphone is because there are only a certain number of web safe/mobile safe fonts.
I have an android webview and the text in it has a font of sans-serif. I have the ttf file in assets/sans-serif.ttf
Here is the code
WebView webVw;
String webContent;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webVw=(WebView)findViewById(R.id.webVw);
webContent="%3Cdiv%20style%3D%22width%3A100%25%3Bheight%3A100%25%3Bposition%3Arelative%3Bleft%3A.1%25%3Btop%3A.1%25%22%3E%3Cdiv%20style%3D%22position%3Aabsolute%3Bwidth%3A31%25%3Bheight%3A42.22222222222222%25%3Bleft%3A36.375%25%3Btop%3A19.02313624678663%25%3Bcolor%3Argb(0%2C%200%2C%200)%3Bfont-size%3A50px%3Bfont-style%3Anormal%3Bfont-family%3Asans-serif%2C%20sans-serif%2C%20sans-serif%3Bfont-weight%3A400%22%20%3EOverlay!%20%3C%2Fdiv%3E%3Ca%20href%3D%22javascript%3A%20void(0)%22%20%20target%3D%22_blank%22%20%3E%3Cimg%20src%3D%22https%3A%2F%2Fsi0.twimg.com%2Fprofile_images%2F1490344068%2FLOGO_COGNIZANT_C_only_normal.jpg%22%20style%3D%22position%3Aabsolute%3Bwidth%3A4.875%25%3Bheight%3A10.444444444444445%25%3Bleft%3A0.625%25%3Btop%3A1.2853470437017995%25%22%20%2F%3E%3C%2Fa%3E%3Cdiv%20style%3D%22position%3Aabsolute%3Bwidth%3A4%25%3Bheight%3A6.666666666666667%25%3Bleft%3A95%25%3Btop%3A1.5424164524421593%25%3Bbackground%3Argb(47%2C%206%2C%20246)%20none%22%20%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%22cf-component%20buttonwrap%22%20style%3D%22position%3Aabsolute%3Bborder%3Dradius%3A5px%3Bwidth%3A4.25%25%3Bheight%3A4.222222222222222%25%3Bleft%3A6.125%25%3Btop%3A3.3419023136246784%25%3Bbackground%3Argb(6%2C%20115%2C%20233)%3Bfont-size%3A15px%3Bfont-style%3Anormal%3Bfont-family%3Asans-serif%2C%20sans-serif%2C%20sans-serif%3Bfont-weight%3A400%22%20%3E%3Ca%20%20class%3D%22editableTxt%22%20href%3D%22http%3A%2F%2Fwww.cognizant.com%22%20target%3D%22_blank%22%3E%20Go!%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E";
String head="<head><style>#font-face {font-family: 'sans-serif';src: url('file:///assets/sans-serif.ttf');}body {font-family: 'sans-serif';}</style></head>";
String HtmlString = "<html>"+head+"<body>"+webContent+"</body></html>";
webVw.loadData(HtmlString, "text/html","charset=UTF-8");
}
The webview displays the normal font but not sans-serif
Try this...
In your assets/fonts folder, place the desired OTF or TTF font (here MyFont.otf)
Create a HTML file that you'll use for the WebView's content, inside the assets folder (here inside assets/demo/my_page.html):
<html>
<head>
<style type="text/css">
#font-face {
font-family: MyFont;
src: url("file:///android_asset/fonts/MyFont.otf")
}
body {
font-family: MyFont;
font-size: medium;
text-align: justify;
}
</style>
</head>
<body>
Your text can go here! Your text can go here! Your text can go here!
</body>
</html>
Load the HTML into the WebView from code:
webview.loadUrl("file:///android_asset/demo/my_page.html");
Take note that injecting the HTML through loadData() has not worked for me. I'd be curious to hear if anybody can get that working.
use this code instead of it
webVw.loadDataWithBaseURL("file:///android_asset/",HtmlString, "text/html", "UTF-8",null);
In some cases if you tried many ways to solve this problem and you did not get your problem solved yet. you should try to check your font file correct name.open your font file and check font name, copy that and rename file to correct name.
In your html codes use correct name too.
I had this problem several times!
When setting custom font to an html page and loading the html data using loadDataWithBaseURL the bold tag is being ignored. My code is as below:
webView.loadDataWithBaseURL("", "<html><style type=\"text/css\"> #font-face { font-family:\"customFont\"; src:url('file:///android_asset/fonts/customfont.ttf');line-height:45px;font-size:34px;} body { font-family:'customFont'; }</style><body><b>The legend is back!!</b></body></html>", "text/html", "utf-8", "");
My output as seen below:
When the same content is loaded using loadData as shown below:
webView.loadData("", "<html><style type=\"text/css\"> #font-face { font-family:\"customFont\"; src:url('file:///android_asset/fonts/customfont.ttf');line-height:45px;font-size:34px;} body { font-family:'customFont'; }</style><body><b>The legend is back!!</b></body></html>", "text/html", "utf-8", "");
My output is as seen below:
Not sure what the possible problem could be. Is there any specific reason for the same.
For now i solved this by using bold font and specifying the same using css in my html. My css code is as below:
#font-face {font-family: MyArialBold;src: url('file:///android_asset/fonts/ArialBold.ttf')} b{font-family: ArialFontBold;}.
Hope that helps.
I'm currently developing an android web browser. There has some pages used other character like Uighur character, and they display unnormally, so I used the following code to resolved this problem.
String htmlStr = getHTML(url, "UTF-8");//get the html content from the url
String tmp="<link href=\"file:///android_asset/myfont.css\" rel=\"stylesheet\" type=\"text/css\" />";
if(htmlStr.contains("</head>")){
htmlStr = htmlStr.replace("</head>", tmp);//add my css into the page
}
mCurrentWebView.loadDataWithBaseURL(url, htmlStr,"text/html", "utf-8", "");//display the page content
This is myfont.css：
#font-face { font-family: MyCustomFont; src: url("fonts/ALPEKRAN.TTF") }
body {font-family: MyCustomFont, Verdana, Arial, sans-serif; text-align:right;}
The ALPEKRAN.TTF font is under the folder of assets/fonts/.
But there have another problem like that page css losed.
Please, give me some suggession.
May you need to specify the full font url, try:
src: url("file:///android_asset/fonts/ALPEKRAN.TTF")