iPhone Development - Setting UIWebView font

Question

I have to show rich text that i pull from server, so i'm using UIWebView. Now the problem is that i have no control over the font which is used in UIWebView. How can i change the font to use system font (making it consistent with rest of the application)?

I'm doing something like this at the moment:

myRichTextView = [[UIWebView alloc] initWithFrame:CGRectMake(x, y, width, height)];
myRichTextView.backgroundColor = [UIColor clearColor];
[myRichTextView setScalesPageToFit:NO];
[myRichTextView loadHTMLString:myString baseURL:[NSURL URLWithString:myBaseURL]];

Again, need to control the display font. If i can't control the font, please let me know other alternatives to UIWebView.

Thanks

if you're pulling from a server, what's the string for myString? Wouldn't all the text come from the server? — Ethan Parker, Mar 08 '16 at 17:15

score 103 · Answer 1 · answered Jan 17 '09 at 06:10

103

It worked when i modified the string like this. Your right chris, it shouldn't make any difference.

NSString *myDescriptionHTML = [NSString stringWithFormat:@"<html> \n"
                                "<head> \n"
                                "<style type=\"text/css\"> \n"
                                "body {font-family: \"%@\"; font-size: %@;}\n"
                                "</style> \n"
                                "</head> \n"
                                "<body>%@</body> \n"
                                "</html>", @"helvetica", [NSNumber numberWithInt:kFieldFontSize], content];

answered Jan 17 '09 at 06:10

Mustafa

20,504
42
146
209

2

ok thats right. Just another doubt, which HTML-font is equivalent to "SystemFont" in ios? Hope its not a big question to be posted as a new question... – Deepukjayan Mar 14 '12 at 05:41
15

I keep waiting for Apple to let users change the system font. so I go just a tiny step further. I do a `UIFont *font = [UIFont systemFontOfSize:21];` and instead of hard coding `@"helvetica"` I put in `font.familyName` – DBD Sep 04 '12 at 14:26
1

@DBD since iOS9, the `fontName` will be something like `.SFUIText-Regular`, which doesn't work with HTML – Daniel Jul 18 '16 at 14:41

score 22 · Accepted Answer · answered Jan 16 '09 at 08:23

22

Reference a css style sheet in your HTML document or put the style information into the top of the HTML document itself

answered Jan 16 '09 at 08:23

score 15 · Answer 3 · answered Jan 16 '09 at 14:44

15

I use the following CSS in a web view to do exactly what you are saying.

body
{
    font-family:helvetica;
}

But yours looks the like it should work as well. Strange. Only difference I can see is the font vs font-family, but that shouldn't make a difference.

chris.

answered Jan 16 '09 at 14:44

PyjamaSam

10,437
3
32
20

Yep this works. And also if you have a space in the font's name, you need to put it in quotes, such as "helvetica neue", san-serif – B-Money May 24 '13 at 03:39

score 11 · Answer 4 · answered Dec 08 '15 at 04:50

11

System Font

-apple-system on iOS 9 & Safari OS X 10

font-family: -apple-system;
font-family: '-apple-system','HelveticaNeue'; // iOS 8 compatible

answered Dec 08 '15 at 04:50

Leslie Godwin

2,601
26
18

score 10 · Answer 5 · edited May 23 '17 at 12:17

10

I made a method that wraps some text in a HTML body with the correct style for a given UIColor and UIFont. It is based on Mustafa answer.

It is used like this:

NSString * htmlString = [MyClass htmlFromBodyString:@"an <b>example</b>"
                                           textFont:[UIFont systemFontOfSize:10]
                                          textColor:[UIColor grayColor]];
[webView loadHTMLString:htmlString baseURL:nil];

edited May 23 '17 at 12:17

Community

1
1

answered Jan 30 '14 at 15:43

Robert

37,670
37
171
213

Thanks for the method! @Robert it's useful! – benLIVE Oct 18 '14 at 17:04

score 6 · Answer 6 · answered Jul 04 '14 at 07:50

another easy way that worked for me

    UIFont *font = [UIFont systemFontOfSize:15];

      NSString *htmlString = [NSString stringWithFormat:@"<span style=\"font-family:Helvetica; font-size: %i\">%@</span>",
                     (int) font.pointSize,
                     [bodyText stringWithNewLinesAsBRs]];
       [myWebView loadHTMLString:htmlString baseURL:nil];

score 4 · Answer 7 · edited Jul 23 '12 at 12:36

4

just change

font:helvetica

to

font-family:helvetica

edited Jul 23 '12 at 12:36

John Conde

217,595
99
455
496

answered Feb 09 '10 at 04:19

Rob

520
5
17

Al-Noor Ladhani · Answer 8 · 2014-05-18T03:05:45.490

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];

score 2 · Answer 9 · answered Feb 05 '12 at 13:17

I use

body {
        font-family: 'Noteworthy-Bold';
    }

This works fine for my about-page (WebView), as the rest of my app also uses Apple's "Noteworthy-Bold".

If you want to use your own font, make use of @font-face and refer to a TTF or EOT file.

iPhone Development - Setting UIWebView font

9 Answers9

Linked