How to honor Dynamic Type Accessibility Sizes with a custom font in an iOS storyboard

Question

How can I use the dynamic type text style "Title 1" and set the font face to the built-in font Chalkboard SE for a UILabel in a storyboard?

I need to honor the Dynamic Type size in iOS (Apple has been encouraging this since iOS 7?) I also need to use the built-in font Chalkboard SE, which is not used by default for the "text styles" fonts. I am currently using a custom font as shown in the image, but need the font to change size in accordance with the user's Dynamic Type/Accessibility Sizes preference just as all the Text Styles fonts do. The best Text Styles option is Title 1, but the font/typeface is unacceptable.

Answer 1

Although you can't specify both a custom font and a preferred text style via Storyboard, it's not difficult to programmatically specify a dynamic type size for your custom font:

Swift:

let pointSize  = UIFontDescriptor.preferredFontDescriptorWithTextStyle(UIFont‌​TextStyleTitle1).poi‌​ntSize
let customFont = UIFont(name: "Chalkboard SE", size: pointSize)

When you receive a UIContentSizeCategoryDidChangeNotification, use the same code to update your label's font.

Obj C:

 CGFloat pointSize = [[UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleHeadline] pointSize];
 [titleLabel setFont:[UIFont fontWithName:@"Marker Felt" size:pointSize]];

Answer 2

We have to add all the extension of related UIFramework for which we have to use dynamic font size of custom font in iOS-11+ such as UILabel, UIButton, UITextField, UITextView. Code is given in swift 4.2. We just need to use these custom classes instead of native ios classes to see effect of dynamic fonts in app.

Here first is Label:

class AppLabel: UILabel {

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if #available(iOS 11.0, *)  {

        self.font = UIFontMetrics.default.scaledFont(for: self.font)
        self.adjustsFontForContentSizeCategory = true
        // Fallback on earlier versions
    } else {
        // Fallback on earlier versions
    }
  }

}

Here 2nd is UIButton:

class AppButton: UIButton {

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if #available(iOS 11.0, *) {

        self.titleLabel?.font = UIFontMetrics.default.scaledFont(for: self.titleLabel?.font ?? UIFont())
        self.titleLabel?.adjustsFontForContentSizeCategory = true
    } else {
        // Fallback on earlier versions 
    }
  }
}

Here 3rd is UITextField:

class AppTextField: UITextField {
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if #available(iOS 11.0, *) {

        self.font = UIFontMetrics.default.scaledFont(for: self.font ?? UIFont())
        self.adjustsFontForContentSizeCategory = true
    } else {
        // Fallback on earlier versions
    }
  }
}

Last one in UITextView:

class AppTextView: UITextView {

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if #available(iOS 11.0, *) {

        self.font = UIFontMetrics.default.scaledFont(for: self.font ?? UIFont())
        self.adjustsFontForContentSizeCategory = true
    } else {
        // Fallback on earlier versions
    }
  }
}

Answer 3

Try my solution without need to listening for NSNotification.Name.UIContentSizeCategoryDidChange.

Simply override traitCollectionDidChange on any UIView or UITableViewCell and update/calulate the fontsize with the similar TextStyle.

You can simply test it with any simulated Device and the Accessibility Inspector on MacOS.

 override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
       super.traitCollectionDidChange(previousTraitCollection)

        let pointSize = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .title1).pointSize
        titleLabel.font = titleLabel.font.withSize(pointSize)
    }