0

enter image description here

Greetings. I'm trying to use two programmatically created Navigation Bar Button Items (the smaller and the larger "A"s in the image above) to allow readers to increase or decrease the size of the text displayed in the WKWebView in an app for iPhones and iPads.

In the view controller, I have the following import statements:

import UIKit

import WebKit

In viewDidLoad, I have the following for creating the two Navigation Bar Button icons:

    let button1 = UIBarButtonItem(image: UIImage(named: "A_16x16"), style: .plain, target: self, action:#selector(decreaseFontSize))

    let button2 = UIBarButtonItem(image: UIImage(named: "A_28x28"), style: .plain, target: self, action:#selector(increaseFontSize))

    self.navigationItem.rightBarButtonItems = [button2, button1]

I also have started the following functions:

    func decreaseFontSize(_ button:UIBarButtonItem!) {

    fontSize = (fontSize > 14) ? fontSize-6 : fontSize
    let fontSpecifier = "document.body.style.fontSize = '" + String(fontSize) + "px'"
    print("decrease font size button pressed")
    print(fontSpecifier)
    textWebView.evaluateJavaScript(fontSpecifier, completionHandler: nil)

}

func increaseFontSize(_ button:UIBarButtonItem!) {

    fontSize = (fontSize < 50) ? fontSize+6 : fontSize
    let fontSpecifier = "document.body.style.fontSize = '" + String(fontSize) + "px'"
    print("increase font size button pressed")
    print(fontSpecifier)
    //textWebView.evaluateJavaScript("document.body.style.fontSize = '40px'", completionHandler: nil)
    textWebView.evaluateJavaScript(fontSpecifier, completionHandler: nil)

}

The CSS for the HTML texts includes these styles:

  body {
      color: black;
      background: white;
      font-size: 1.2em; /*20px; but use em */
      text-align: left;
      font-family: "MyCustomFont", sans-serif;
      margin-right: 8px;
      margin-left: 8px;
  }

This works somewhat, but "MyCustomFont" (or MyCustomFont without quotes) is ignored. I so would love to have the custom font displayed.

Any guidance or proposed solutions would be appreciated.

WPWPWP
  • 363
  • 4
  • 15
  • 1
    So, it sounds like your actual question is something like *How can I set the font in a web view?* Is that what you want to know? – Caleb Jun 20 '17 at 21:20
  • Well, my original question was about how to adjust the font size. I think I've got that working now. I formerly had a UIWebView working with the custom font and switched to a WKWebView. Since you've asked, I'm unsure that the custom font ever worked inside the WKWebView. – WPWPWP Jun 20 '17 at 21:29

1 Answers1

0

Thanks to Aditya Deshmane's answer to Using custom fonts in WKWebView I put this at the top of my CSS file and my custom font is displayed:

    @font-face {
        font-family: 'MyCustomFont';
        src: local('MyCustomFont'),url('MyCustomFont.ttf') format('truetype');
    }

The icons seem to adjust the font size as desired in my iPad-mini 4 but "work" somewhat inconsistently in my iPhone 6. I'm not yet accepting this, my own answer, as "the accepted answer" as there is room for improvement.

WPWPWP
  • 363
  • 4
  • 15