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');
Related
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 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?
I am working on a fullscreen webapp to androidPage Not Found We couldn't find the page you requested. I have everything done but can I possible add all the images offline in the app and the html online?
I am using:We did, webView.loadUrl("http://site.com/Sd34DsX.html");
And I wonder if i could host the images in the HTML file like this:
#fotball
background-image: url('file:///android_asset/fotball.png');
background-repeat:no-repeat;
float: left;
position:fixed
almost, but no, because you can't write to the asset folder from within the app. you only use that to store resources which your app will use after compiling.
what you can do is get the entire HTML as a string, and do a string search for all of the image paths. You can then retrieve those images in their own http requests, and save them to a folder in external storage.
you can then modify your html string to replace all of the image paths with local paths.
your webview can use string data as a webpage.
Instead of:
background-image: url('file:///android_asset/fotball.png');
try a data url, which has no cross-domain restriction:
background-image: url('data:image/format;base64,IMAGEDATA');
hi
In my application i need to display a html page in webview and that html page should refer to sdcard location for .css file (Using link href="...." tag).
I placed 2 files (i.e) html and css ) in sdcard->mibook.
I tried by giving absolute path as link href="/mnt/sdcard/mibook/0.css"
how can i specify path name android?
Edited:
Above problem solved : by using this- link href="file:///sdcard/mibook/0.css"
But i have following requirement,
i need to handle around 50+ html file every time ,
I placed all files as follows,
mibook->book1->pg90.sqlite
mibook->book1->links->o.css and 1.css
The sqlite file contains html pages. each html page has css reference as link href="/links/0.css"
These css file should be refer by html. how can i do this?
Try
link href="file:///sdcard/mibook/0.css"
Assuming Android >= 2.1
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