I'm trying to change the font of web pages loaded in to a Browser app developed for Android. Currently my custom font is hosted in a URL & I access the font from there by injecting a JavaScript to the page to change the style sheet (CSS) font face.
Here is the current code:
var css = '#font-face {font-family: "dhanika"; src: url(http://www.sample.lk/DhanikaWeb.ttf);} si {font-family: "dhanika"}';
var style = document.getElementsByTagName("style")[0];
style.appendChild(document.createTextNode(css));
This code works perfectly. But it takes some time to load the font from the URL. And also it is not good to load the font each time since it may incur data charges.
Therefore I wanna know weather there is a method to access my custom font from the JavaScript, if I place my font in my app's 'Assets' folder. Glad if anyone can provide the code.
Any help is appreciated!
From what I know about Android and #font-face, Android currently chokes on the local() declaration. The best method for using #font-face with all browsers is to use double declarations. Example
#font-face { font-family:'fontName'; src:url('fontName.eot'); font-weight:normal; font-style:normal; }
#font-face { font-family:'fontName'; src:url(//:) format('no404'), url('fontName.woff') format('woff'), url('fontName.ttf') format('truetype'), url('fontName.svg') format('svg'); font-weight:normal; font-style:normal; }
The Easiest way to do this is to use FontSquirrel's #font-face generator
Related
My need is to set HTML string into TextView but the problem is the <p style=\"text-align:center\"><span style=\"font-family:montserrat\"><span style=\"color:#660099\"><strong>Hello World</strong></span></span></p>\r\n
That font-family:montserrat is not applied to Text.
Note: I tried to load this HTML string using WebView but there is also same problem is raising.
Please suggest a workaround.
Thanks
Add your font file to your android project, in your case:
montserrat.tff
Define like this in your html string:
#font-face { font-family: montserrat; src: url('fonts/montserrat.ttf'); }
Then try like this:
yourWebView.loadDataWithBaseURL("file:///android_asset/",htmlString,"text/html","utf-8",null);
I have working with webview in which i want to inject css to webview that i have achieved with the following link.
But if i want to add custom font to css i have using the following code
#font-face {
font-family: 'avenir_next'; /*a name to be used later*/
src: url('OTF_FILE_LINK'); /*URL to font*/
}
body {
font-family: avenir_next;
}
I need to know that its is possible to load otf file from the Android Asset folder insted of using 'OTF_FILE_LINK'.
I need to use the UhmanicHafs.ttf font in webView Html page to get the Expected output.
I am setting uthmanic font:
webviewHTML.loadDataWithBaseURL("file:///android_asset/fonts/UthmanicHafs.ttf",
myHtmlString, "text/html", Xml.Encoding.UTF_8.toString(), null);
Then I am getting the Actual Output
If I removed the UthmanicHafs.ttf font like this :
webviewHTML.loadDataWithBaseURL("file:///android_asset/", myHtmlString, "text/html", Xml.Encoding.UTF_8.toString(), null);
I am getting this Expected Output
What I need:
I need to use the Uthmanic Font and get the Expected output.Anyone can help with this.Thank you.
you need set the custom font like below in your css file
For this example wrote the CSS to:
#font-face {
font-family: 'feast';
src: url('fonts/yourfont.ttf');
}
body {font-family: 'feast';}
Then use the assets path as the base url:
loadDataWithBaseURL("file:///android_asset/",myhtml,"text/html","utf-8",null);
then it should be working fine.
This problem seems familiar but it's not! I have a webpage on a web server and a webview in Android application that loads the webpage. And instead of loading some font from the Internet (or website), i want to load fonts directly from asset folder of Android device (to save data and faster). What i have done is to embed this code in the website with the hope it can use the font in Android asset folder instead:
#font-face {
font-family: 'DejaVuSans';
src: url('file:///android_asset/fonts/DejaVuSans.ttf'); /* but this does not work*/
}
body {
font-family: 'DejaVuSans';
color: red;
}
(link Change WebView font using CSS; font file in asset folder. (problem))
I currently test with android 4.+. Can anyone have the solution? Thanks
file: urls retrieve files from within one's own computer. For websites you should use relative or absolute urls. Here's a relative url example:
src: url('android_asset/fonts/DejaVuSans.ttf');
Here's a absolute url example:
src: url('http://www.example.com/android_asset/fonts/DejaVuSans.ttf');
I am trying to reference a local font file in the assets folder as follows:-
#font-face {
font-family: 'MyFont';
src: url('file:///android_asset/MyFont.ttf');
}
And then using
webView.loadUrl("http://www.dummy.com/page_that_uses_font_css.html");
But it seems that this does not work, I have searched stack and the web and found that most examples of doing something similar to this can only do so with loadDataWithBaseURL(...);
I have also tried to override WebResourceResponse WebViewClient.shouldInterceptRequest(...) but it seems that #font-face src references are not picked up by this method and therefore unable to return my font as an asset stream.
Is it even possible to do this at all, any other way?
If anyone could recommend an alternative or provide help on this issue it would be highly appreciated.
Thanks for the help.
It seems you can change the html code too. How does your HTML look like?