Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to set font type to webview

I have found many question to set font type to webview.I have tried i can't able to fix.

I have 10 html file in my assest folder. In swipe im displaying one by one in webview, Till this its works fine, now i need on button click change font type of that(for all html page which im loading 10 files). How can i change font type of my html displaying in webview.

1st way

  mainContent.getSettings().setJavaScriptEnabled(true);
            WebSettings webSettings = mainContent.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webSettings.setBuiltInZoomControls(true);
            mainContent.requestFocusFromTouch();
            mainContent.setWebViewClient(new WebViewClient());
            mainContent.setWebChromeClient(new WebChromeClient());
            mainContent.loadUrl("file:///android_asset/"+filename.get(position));
       Typeface font = Typeface.createFromAsset(getAssets(), "myfont.ttf"); 
            webSettings.setFixedFontFamily(font);
            webSettings.setDefaultFontSize(20);

2nd way

I have get the content of html and i have passed into a string, i can't able to pass into it, if the content passed correctly this will work.

   mainContent.getSettings().setJavaScriptEnabled(true);
            WebSettings webSettings = mainContent.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webSettings.setBuiltInZoomControls(true);
            mainContent.requestFocusFromTouch();
            mainContent.setWebChromeClient(new WebChromeClient());
            mainContent.loadUrl("file:///android_asset/"+filename.get(position));
            mainContent.setWebViewClient(new WebViewClient() {
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                    mainContent.setWebViewClient(null);    
           mainContent.loadUrl("javascript:window.HTMLOUT.processHTML('<div>'+document.getElementsByTagName('div')[0].innerHTML+'</div>');");
                     String pish = "<html><head><style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/Kelvetica.ttf\")}body {font-family: MyFont;font-size: medium;text-align: justify;}</style></head><body>";
                     String pas = "</body></html>";     
                     String myHtmlString = pish + page + pas;   // here i can't able to get the `page`
                     mainContent.loadDataWithBaseURL(null,myHtmlString, "text/html", "UTF-8", null);

and in my activity

  class MyJavaScriptInterface {
        @SuppressWarnings("unused")
        public void processHTML(final String html) {
            runOnUiThread(new Runnable() {
                public void run() {
                     Spanned page = Html.fromHtml(html);
                     System.out.println("content"+page);

                }
            });
        }
    }

i need to pass this page into above code

3rd way

  mainContent.getSettings().setJavaScriptEnabled(true);
            WebSettings webSettings = mainContent.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webSettings.setBuiltInZoomControls(true);
            mainContent.requestFocusFromTouch();
            mainContent.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT"); 
           mainContent.loadUrl("file:///android_asset/"+filename.get(position));
            mainContent.setWebViewClient(new WebViewClient() {
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                    mainContent.setWebViewClient(null);
                    mainContent.loadUrl("javascript:(function() { var s=document.createElement('style');s.innerHTML ="
                                + " '@font-face{font-family:ZawGyi-One;src:url('file:///android_asset/fonts/zeroesthree.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\"})()");
                }
            });

I have tried like this. I can't able to change the fonttype. Any one have idea please share it. I'm working on this problem for past two days. Thanks in Advance.

like image 488
Make it Simple Avatar asked Jul 16 '14 08:07

Make it Simple


1 Answers

You can do this in two way

  1. If your button is part of html then you can call a JavaScript function on click event
  2. Using Android button you can call a JavaScript function that will update font family

Here is example : CSS font_first.css:

.box_heading{
        width:340px;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        color:#000;
        font-size:20px;
        font-weight:normal;
        margin-top:14px;
        float:left;
        text-transform:uppercase;}

Html: index.html

If you are doing this with second method you just need to call changeFont() from android webview for this you have to call mainContent.loadUrl("javascript:changeFont()")

EDIT
If so you can try this : myWebView.loadUrl("javascript:document.getElementById('navigationText')style.fontFamily ='"+fontName+"');

like image 189
Jaiprakash Soni Avatar answered Oct 14 '22 02:10

Jaiprakash Soni