How to change font size in the WebView (Swift 5)

Question

I load text to the WebView. And I need to change font and its size. I use this code, but font is too small. It isn't 15 points. What is my problem?

private lazy var webView: WKWebView = {
        let contentController = WKUserContentController()
        
        let webConfig = WKWebViewConfiguration()
        webConfig.userContentController = contentController
        webConfig.dataDetectorTypes = [.phoneNumber, .link]
        
        let web = WKWebView(frame: .zero, configuration: webConfig)
        web.navigationDelegate = self
        return web
    }()

    ...
    let fontName =  "PFHandbookPro-Regular"
    let fontSize = 15
    let fontSetting = "<span style=\"font-family: \(fontName);font-size: \(fontSize)\"</span>"
    webView.loadHTMLString(fontSetting + myHTMLString, baseURL: nil)

jnpdx · Accepted Answer · 2021-03-11T07:24:57.073

4

The span tag you have won't really do anything, since it's opening and closing immediately -- it doesn't contain any content.

This solution works assuming your HTML string doesn't already have full <head> and <body> tags:

let header = """
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
            <style>
                body {
                    font-family: "Avenir";
                    font-size: 24px;
                }
            </style>
        </head>
        <body>
        """
webView.loadHTMLString(header + myHTMLString + "</body>", baseURL: nil)

The first important thing this does is set the viewport so that the page is the correct scale for the device (the primary reason your text was so small). Then, it also shows you how to set a font family and font size for the body of the HTML.

If your HTML markup already has <head> and <body> tags, you might want to do the same sorts of things (changing the viewport and body styles) by injecting javascript. You can see some info about doing this here: WKWebView equivalent for UIWebView's scalesPageToFit

edited Mar 11 '21 at 07:24

answered Mar 11 '21 at 07:10

jnpdx

45,847
6
64
94

How can I do it on iOS side? A don't have access to html code because I use API. – VyacheslavBakinkskiy Mar 11 '21 at 07:20
In your example, you call `loadHTMLString` with a variable called `myHTMLString`. Isn't that the HTML? – jnpdx Mar 11 '21 at 07:21
It's String from json – VyacheslavBakinkskiy Mar 11 '21 at 07:25
Okay -- my answer shows you exactly what to do with it. I've even updated it to include your exact variable name. Is there something about it that isn't working for you? – jnpdx Mar 11 '21 at 07:26
If I change font size to higher value it's work, but value is too big. 14 pt = ±40 – VyacheslavBakinkskiy Mar 11 '21 at 07:27
Does your HTML already have a section in it like I describe in the last paragraph of my answer? Please update your original question with the HTML that you're trying to display. – jnpdx Mar 11 '21 at 07:29
It's works, thank you. Font size in px is equal pt? Can I change it to 15? – VyacheslavBakinkskiy Mar 11 '21 at 07:36
px and pt are not the same thing (https://stackoverflow.com/questions/3557260/should-i-use-pt-or-px). Yes, you can change it to 15. If this answer worked for you, please consider upvoting/accepting – jnpdx Mar 11 '21 at 07:38
How can I change font color? – VyacheslavBakinkskiy Mar 11 '21 at 08:24
Change color of what? – jnpdx Mar 11 '21 at 14:49

How to change font size in the WebView (Swift 5)

1 Answers1