How to change WKWebView or UIWebView default font

ios objective-c swift uiwebview wkwebview

51,835

Solution 1

You can use your UIFont object (so you can set it and modify more easily), but wrap the HTML in a span instead; font tags have been deprecated since HTML 4.01.

UIFont *font = [UIFont fontWithName:@"GothamRounded-Bold" size:14];

Assuming you already have the NSString *htmlString created, you can use the font's properties:

htmlString = [NSString stringWithFormat:@"<span style=\"font-family: %@; font-size: %i\">%@</span>",
                                        font.fontName,
                                        (int) font.pointSize,
                                        htmlString];

Alternatively, you could just supply the values instead of using a UIFont object:

htmlString = [NSString stringWithFormat:@"<span style=\"font-family: %@; font-size: %i\">%@</span>",
                                        @"GothamRounded-Bold",
                                        14,
                                        htmlString];

Solution 2

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='GothamRounded-Bold' size='3'>%@", body];
[webView loadHTMLString:htmlString baseURL:nil];

Solution 3

You could try to set the font by injecting a line of JavaScript like this:

[webView stringByEvaluatingJavaScriptFromString: @"document.body.style.fontFamily = 'GothamRounded-Bold'"];

Solution 4

There is the swift 3 solution :

func webViewDidFinishLoad(_ webView: UIWebView) {
    webView.stringByEvaluatingJavaScript(from: "document.getElementsByTagName('body')[0].style.fontFamily =\"-apple-system\"")
}

I have just put the default iOS font for this example

Solution 5

Here is my easy-to-use and easy-to-expand solution with more font settings:

myHTMLLabel = [[UIWebView alloc] initWithFrame:CGRectMake(myX, myY, myWidth, myHeight)];

myHTMLLabel.userInteractionEnabled=NO;
myHTMLLabel.scalesPageToFit=NO;

[myHTMLLabel setOpaque:NO];
myHTMLLabel.backgroundColor = myBackColor;

NSString *myHTMLText = [NSString stringWithFormat:@"<html>"
                        "<head><style type='text/css'>"
                        ".main_text {"
                        "   display: block;"
                        "   font-family:[fontName];"
                        "   text-decoration:none;"
                        "   font-size:[fontSize]px;"
                        "   color:[fontColor];"
                        "   line-height: [fontSize]px;"
                        "   font-weight:normal;"
                        "   text-align:[textAlign];"
                        "}"
                        "</style></head>"
                        "<body> <SPAN class='main_text'>[text]</SPAN></body></html>"];

myHTMLText = [myHTMLText stringByReplacingOccurrencesOfString: @"[text]" withString: myText];
myHTMLText = [myHTMLText stringByReplacingOccurrencesOfString: @"[fontName]" withString: myFontName];
myHTMLText = [myHTMLText stringByReplacingOccurrencesOfString: @"[fontSize]" withString: myFontSize];
myHTMLText = [myHTMLText stringByReplacingOccurrencesOfString: @"[fontColor]" withString: myFontColorHex];
myHTMLText = [myHTMLText stringByReplacingOccurrencesOfString: @"[textAlign]" withString: myFontAlign];


NSLog(@"*** renderHTMLText --> myHTMLText: %@",myHTMLText);

[myHTMLLabel loadHTMLString:myHTMLText baseURL:nil];

View more solutions

51,835

Au Ris

Programmer, sound enthusiast, biker, baby sitter, basketball watcher, coffee lover.

Updated on July 09, 2022

Comments

Au Ris almost 2 years
What font does UIWebView and WKWebView use by default? I would like to be able to change that. But I don't want to do it in the html string, instead I want to have something like:
```
// obj-c
[webView setFont:[UIFont fontWithName:@"GothamRounded-Bold" size:14]

// swift
webView.setFont(UIFont(name: "GothamRounded-Bold", size: 14))
```
is there such property or some other way?
Au Ris over 11 years

Hmm, too bad. It would be handy to have a setFont property like it is in UITextView.
Chris J almost 11 years

For font size: [webView stringByEvaluatingJavaScriptFromString: @"document.getElementsByTagName('body')[0].style.fontSize = '15px'"];
Chris J almost 11 years

Great method, one important thing to note: This is rendered prior to displaying content unlike the javascript method.
Raptor about 10 years

sidenote: it works, but font tag is already deprecated long time ago, as suggested by other answer. In short, DO NOT USE <font> tag
Raptor about 10 years

One disadvantage of this approach is, declaring UIFont uses some RAM, which can be avoided by just providing the font name and size in string and integer.
devios1 about 9 years

This is also just a horrible solution in general, as you're guaranteed to break the HTML. You're going to be wrapping the <!DOCTYPE> and <html> tags in an outer <font> tag, which is just horrible. Even if it happens to work because browsers are tolerant enough, that doesn't excuse this kind of design, imo.
devios1 about 9 years

This suffers from the same issue I mentioned on TijuanaKez's answer. In short it's hackish and breaks the HTML of the pages you are displaying.
devios1 about 9 years

There is a default font. All web browsers have a default font that is used when no font is otherwise specified. Whether it is customizable or not is the question, and it seems the answer is no.
pipacs over 8 years

Make sure you call the above script after loading the web content, e.g. from the delegate's webViewDidFinishLoad method.
waki almost 7 years

thanks, it's helped. font-family with css not working.
Tejas over 6 years

what about font size? how to put that?
daleijn about 5 years

@Tejas let preferences = WKPreferences() preferences.minimumFontSize = 17