Change font from Webview in ios

Question

My app has a WebView load by Url, not html string. I have tried several options to change the font, but it didn't work. I use this method below. Please offer some help and sorry for my poor English!

NSString *fontFamilyStr = @"document.getElementsByTagName('body')[0].style.fontFamily='PingFangSC-Light';";
[webView stringByEvaluatingJavaScriptFromString:fontFamilyStr];

score 3 · Accepted Answer · answered Jul 12 '18 at 07:08

3

I am not really sure where are you trying to call stringByEvaluatingJavaScriptFromString in your code, you should call it once the webView finishes loading, because you are trying to modify the UI HTML page (by changing font) if you try to run your JavaScript command even before webpage finishes loading, though your javaScript code runs, it wont be able to modify the properties of its components because they might not yet have finished rendering.

Hence,

Step 1:

Make your ViewController the navigationDelegate of your webView

webView.navigationDelegate = self

Step 2:

Add extension to your ViewController and confirm to WKNavigationDelegate

extension ViewController : WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let changeFontFamilyScript = "document.getElementsByTagName(\'body\')[0].style.fontFamily = \"Impact,Charcoal,sans-serif\";"
        webView.evaluateJavaScript(changeFontFamilyScript) { (response, error) in
            debugPrint("Am here")
        }
    }
}

Step 3:

Observe the usage of '\' to escape special characters like singleQuote (') and doubleQuotes (") in "document.getElementsByTagName(\'body\')[0].style.fontFamily = \"Impact,Charcoal,sans-serif\";" which you are missing in your code above

Step 4:

Make sure your provide proper FontaFamilies and options to fall back if your webPage cant find the specified FontFamily (Look at 3 font names I have specified Impact,Charcoal,sans-serif)

O/P

Without NavigationDelegate (without running javaScript)

After Applying Font

Hope this helps

answered Jul 12 '18 at 07:08

Sandeep Bhandari

19,999
5
45
78

Can I use this method on UIwebView? [webView stringByEvaluatingJavaScriptFromString: @"document.getElementsByTagName(\'body\')[0].style.fontFamily = \"PingFangSC-Light\";"]; Still not working after i add "\" in my code. I can change size and color but not font. Please help! Thanks – fritz Jul 12 '18 at 07:21
@fritz : Nope you have to use it with `WKWebView`, UIWebView is deprecated and should not be used further. Try setting different font family, I believe the one you are setting is not available to WebView. Try using some other font family to check if code is working or not. I have added screenshot of working code so no issue in code I believe. Its the font family you are setting is causing the issue. Is that the custom font you installed ? – Sandeep Bhandari Jul 12 '18 at 07:23
Still not working. WKWebView seems not working on devices which is under ios 11. i'm going to use custom font. – fritz Jul 12 '18 at 08:00
1

@ Sandeep Bhandari: It works well on english. But I need to implement on custom chinese. I have put the ttf file in xcode and can use in storyboard. Is there any method to get the right font name? Thanks for ur help! – fritz Jul 12 '18 at 08:21
@fritz : `WKWebView` does not load the custom app fonts by default, I can give you two solution. 1. Download the webpage as HTML string and then dynamically insert style to it to use your custom font as mentioned in these answers (not straight forward though) using GCDWebServer as shown here https://stackoverflow.com/questions/25785179/using-custom-fonts-in-wkwebview 2. Use system font closer to your required font family. – Sandeep Bhandari Jul 12 '18 at 08:39
@fritz : I wish I could help u with real solution using GCDWebServer but unfortunately I dont have any experience using it :( Hope ull find your solution soon :) All the best – Sandeep Bhandari Jul 12 '18 at 09:03

score 1 · Answer 2 · answered Jul 12 '18 at 06:48

1

Just prefix a <font face> tag to your string before loading into the webView.

NSString *body = [plist objectForKey:@"foo"];
NSString *htmlString = 
    [NSString stringWithFormat:@"<font face='PingFangSC-Light' size='3'>%@", body];
[webView loadHTMLString:htmlString baseURL:nil];

answered Jul 12 '18 at 06:48

Reza Mousazadeh

148
1
10

I use url to load the webView. [myWebView loadRequest:theRequest] Can you explain what [plist objectForKey:@"foo"] stands for please – fritz Jul 12 '18 at 06:53

score 1 · Answer 3 · answered Jul 12 '18 at 06:56

1

lets Try it.It works for me. Hope it will helps you.

let styles = "<html><head>"
        + "<style type=\"text/css\">body{font-size:20px;font-family:Helvetica;}"
        + "</style></head>"
        + "<body>" + "</body></html>"

    self. webView.loadHTMLString(styles, baseURL: nil)

answered Jul 12 '18 at 06:56

Sanjukta

1,057
6
16

Can I both use url and htmlString when loading into the webview? Sorry for the dumb question, I'm still new to ios development. – fritz Jul 12 '18 at 07:04
I don't get it. I call [myWebView loadRequest:theRequest]; to load webview. I can still call [myWebView loadHTMLString: styles baseURL:nil]; ? Thanks for ur help. – fritz Jul 12 '18 at 07:13

Change font from Webview in ios

3 Answers3