how to set font type to webview

android, fonts, html, webview

Solution

You can do this in two way

- If your button is part of html then you can call a JavaScript function on click event

- 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+"');`

Problem

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.

Original source