Change font WebView for an already loaded site with Android

Question

I have been searching for days but could not find solution for my problem. Please kindly take a look:

Input: a WebView with an already loaded web.
Output: change the font of that loaded web inside the WebView.

What I have done so far is this:

    @SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = (WebView) findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.setWebViewClient(new WebViewClient());
    mWebView.loadUrl("http://www.bbc.co.uk/");

and then, this is how I change the font inside webview: 1/ way 1:

        mWebView.loadUrl("javascript:(function() { var s=document.createElement('style');s.innerHTML ="
            + " '@font-face{font-family:ZawGyi-One;src:url(\"http://db.tt/OQ1RZoWc\");}"
            + "body,div,h1,h2,h3,input,textarea{font-family:ZawGyi-One! important;}';"
            + "document.getElementsByTagName('head')[0].appendChild(s);document.getElementsByTagName('body')[0].style.fontFamily = \"ZawGyi-One\"})()");

2/ way 2:

mWebView.loadDataWithBaseURL(
            null,
            "<script>javascript:(function() { var s=document.createElement('style');s.innerHTML ="
                    + " '@font-face{font-family:ZawGyi-One;src:url(\"http://db.tt/OQ1RZoWc\");}"
                    + "body,div,h1,h2,h3,input,textarea{font-family:ZawGyi-One! important;}';"
                    + "document.getElementsByTagName('head')[0].appendChild(s);document.getElementsByTagName('body')[0].style.fontFamily = \"ZawGyi-One\"})() </script>",
            "text/html", "UTF-8", null);

3/ way 3:

        mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            // TODO Auto-generated method stub
            super.onPageFinished(view, url);

            mWebView.loadUrl("javascript:(function() { var s=document.createElement('style');s.innerHTML ="
                    + " '@font-face{font-family:ZawGyi-One;src:url('file:///android_asset/fonts/BLKCHCRY.TTF');}"
                    + "body,div,h1,h2,h3,input,textarea{font-family:ZawGyi-One! important;}';"
                    + "document.getElementsByTagName('head')[0].appendChild(s);document.getElementsByTagName('body')[0].style.fontFamily = \"ZawGyi-One\"})()");

        }
    });

But unfortunately, none of my solutions works. Even though I have tried to change html file insdie /assets/ folder and also the fonts are stored at /assets/fonts/ folder, I cannot walk through this.

**One more question: is it really possible to change font style inside an already loaded site of webview ? Someone, please kindly guide me.

I am appreciated your great help.

look into this answer..http://stackoverflow.com/questions/3900658/how-to-change-font-face-of-webview-in-android.. Hope it will helps you. — Born To Win, Jun 25 '14 at 06:58
Thank you ! But those topics were about changing font style for an offline html site at /assets/ folder, what I meant was about changing font style of an online web (as http://www.bbc.co.uk/ ) when that site is loaded into webview. Could you or someone else please kindly help me ?!? Thank in advance. — zoro, Jun 25 '14 at 07:31

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

look into this answer..How to change font face of Webview in Android?..

Or try this demo project..https://github.com/mayooresan/Japs-Attack-Ceylon--Android-App

Hope it will helps you.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 25 '14 at 07:01

Born To Win

3,319
3
19
27

score 0 · Answer 2 · edited May 23 '17 at 11:55

At last, I have figured it out:

1/ Without making change in the content of webpage you cant change the font. WebView is basically a view to display web pages That web pages may be static(eg html) or dynamic. But it doesn't change the look and feel of web page. so It wil display the text exactly same as that of webpage. If you need to change the font then you have to change it in webpage (may be in html).

(from Webview change font ? _android)

2/ one more solution for this is about changing font from the rendering engine of webview, for Chrome app, it should be now is Blink, or Internet app, it would be Webkit.

So, if anyone is facing the same problem as I was, my little piece of advice is find the way around, you normally do not have enough time or authorize to make the change at rendering engine of webview. :)

Have a nice day.

Change font WebView for an already loaded site with Android

2 Answers2