Swift. Custom font for WebKit

Question

Im a new in IOS. And i want to change font in WebView.

My webView page loading like this:

// contentRendered - cames from API like html

   self?.webView.loadHTMLString(contentRendered, baseURL: nil)

I have code for change font:

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    let font = UIFont.init(name: "Quicksand-Regular", size: 22)
    let jsFont = "document.getElementsByTagName('body')[0].style.fontFamily = '\(font!)';"
    webView.evaluateJavaScript(jsFont, completionHandler: nil)
}

But it doesnt work. Quicksand-Regular i have in resources folder

UPD:

let jsFont = "document.getElementsByTagName('body')[0].style.fontFamily = 'Quicksand-Regular';"
webView.evaluateJavaScript(jsFont, completionHandler: nil)

Doesnt work too

Answer 1

To apply a custom font to an external HTML loaded in WKWebView (forced) Use the WKWebView HTML in the app if you want to display a custom font was added to the app in the CSS as shown below can be referred to (likely).

@font-face {

  font-family: 'CustomFontFamily';

  src: url('CustomFontFile.otf') format('opentype');
 }
============================================

import UIKit
 import WebKit

class ViewController: UIViewController, WKNavigationDelegate {



    @IBOutlet weak var webView: WKWebView!



    override func viewDidLoad() {

        super.viewDidLoad()

        webView.navigationDelegate = self



        let url = URL(string: "https://example.com/")

        let request = URLRequest(url: url!)

        webView.load(request)

    }



    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {

        //to encode the font data in the app in the Base64 

        let yuGothicMedium = getDataString(otf: "YuGothic-Medium")

        let yuGothicBold = getDataString(otf: "YuGothic-Bold")



        //embedded encoded font data in the Data URI scheme CSS 

        let cssString = """

        @font-face {

            font-family: 'YuGothic';

            src: url('data:font/otf;base64,\(yuGothicMedium)') format('opentype');

            font-weight: normal;

        }

        @font-face {

            font-family: 'YuGothic';

            src: url('data:font/otf;base64,\(yuGothicBold)') format('opentype');

            font-weight: bold;

        }

        """



        //JavaScript to add the CSS as a style element 

        because//cssString is to enter a new line template literal 

        let customFontJs = """

        var style = document.createElement('style');

        style.innerHTML = `\(cssString)`;

        document.head.appendChild(style);

        """



        //executes the JavaScript 

        webView.evaluateJavaScript(customFontJs, completionHandler: nil)

    }



    func getDataString(otf: String) -> String {

        let path = Bundle.main.path(forResource: otf, ofType: "otf")

        let url = URL(fileURLWithPath: path!)

        let data = try! Data(contentsOf: url)

        return data.base64EncodedString()

    }
 }