CODEWITHSUNDEEP
androidwebviewandroid-webviewarabiccustom-font
mahdi
mahdi

Reputation: 16407

use custom font in WebView on Android

i try to use custom font in WebView so i copy font file in assets directory and then i use this code for show webview but it`s show with defalt font ! 

String html = "<html><head>"
            + "<style type=\"text/css\">"
            +" @font-face {font-family:MyFont; src: url('file:///android_asset/font/Yekan.TTF');}"
            + "body{font-family:MyFont; color: #666666; background-color: #f9f9f9; direction:rtl; text-align:justify; line-height:40px;}"
            + "</style></head>" + "<body>" + "<p align=\"justify\">" + text
            + "</p> " + "</body></html>";
    intro.loadDataWithBaseURL("", html, "text/html", "UTF-8", "");

can any body help me to use custom font in web view ? thanks

Upvotes: 1

Views: 6429

Answers (2)

Hardik Hirpara
Hardik Hirpara

Reputation: 3046

String str1 = "<html><head><style type=\"text/css\">@font-face {font-family: 
MyFont;src: url(\"file:///android_asset/fonts/FontName.otf\")}body {font- 
family: MyFont;}</style></head><body>";

String str2 = "</body></html>";
String myHtmlString = str1 + your content + str2;
webView.loadDataWithBaseURL(null,myHtmlString, "text/html", "UTF-8", null);

Upvotes: 2

M D
M D

Reputation: 47817

This may help to you because it is working in mycase from android 2.3.3 to 4.3. You can create one css file and mention all your design body properties, header properties, etc.. within a tag into css file and then insert this css file to project assets folder and load into webview. I show you below.

Default.css file 

body 
{font-family:Verdana, Arial, Helvetica;
font-size: 12px;
background-color:transparent!important;line-height:23px;
color:#000;margin:10px;
}
blockquote {
margin: 3em 0px 2em 0px;
padding-left: 40px;
font-style: italic;
}
blockquote:before {
color: #cccccc;
content: '\201C'; 
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
}
blockquote p {margin-top:-10px;
font-style: italic;}

a:link 
{color: rgb(204, 0, 0);
font-family: Verdana;
font-size: 12px;}
a:active 
{color: rgb(255, 0, 0);
font-family: Verdana;
font-size: 12px;}
a:visited 
{color: rgb(204, 51, 0);
font-family: Verdana;
font-size: 12px;}
.Title
{
margin-bottom:3.0pt;
font-size:26.0pt;
font-family:"Cambria","serif";
color:#17365D;
letter-spacing:.25pt;}

and below code for loading this css file into webview.

String Webview_data = "Here is your information";

                String linkCss1 = "<link rel='stylesheet' href='css/default.css' type='text/css'>";

                String body = "<html><header>" + linkCss1 + "</header>" + "<body>"+Webview_data + "</body></html>";
                mWebView.loadDataWithBaseURL("file:///android_asset/", body, "text/html", "UTF-8", null);

Upvotes: 2

Related Questions