How to Implement Custom Font with UIFontPickerController in iOS 13

Give your app some font and style

Photo by Alexander Andrews on Unsplash

iOS 13 introduces new features of UIFontPickerController now you can give users of your app the ability to select multiple fonts. UIKit provides UIFontPickerController and as a built-in view controller for letting users select from a list of installed fonts available in your apps.

Aim of this Piece

• We will implement this new feature UIFontPickerController in our sample iOS applications.
• We will talk about some delegate method of UIFontPickerController and more specifically, you can create it with a customization class that contains three useful properties.

If you are preparing for your technical coding interview or you want to learn recursion to improve your problem-solving skills then you should definitely check this free udemy course Master the Recursion from Beginner to Advance Level

If you want to learn ARKit 3 from beginner to expert level then click here to get the course and also you will get 97% discount.

If you are passionate about learning mobile development for iOS and looking to take your iOS development skills to the next level, Core Data with CloudKit framework should be at the top of your list. Click here to get the course and also you will get 97% discount.

Learn SwiftUI from Scratch click here to get the course because in this course we are going to build many apps using SwiftUI such as Facebook clone, News app, Notes app and much more.

Getting Started With Sample iOS Application

Open up Xcode and create a new Xcode project.

Choose Single View App under iOS template and click next.

Enter your Product Name, click next, and create it on your desktop.

Implementation

First, go to Main.storyboard and embed the ViewController into NavigationController then drag one UILabel from your object library, place it on the canvas, and constrain it. Then, open the assistant editor and create one IBOutlet of the UILabel. Now Jump to the ViewController.swift file and inherit UIFontPickerControlleDelegate protocol.

Main.storyboard look like this

1. We start by creating a UIFontPickerController instance and give the delegate self in viewDidLoad() method.
2. Next, we will take fontPickerViewControllerDidPickFont() delegate method of UIFontPickerControlleDelegate.
3. Next, we will create a descriptor that is optional will be use guard let to safely unwrap it.
4. Next, we will create a UIFont instance and in the descriptor parameter we will pass our descriptor which we have recently created.
5. Finally, we will set this UIFont to our UILabel font.

Code look like this

let fontPicker = UIFontPickerViewController()
func fontPickerViewControllerDidPickFont(_ viewController: UIFontPickerViewController) {
guard let descriptor = viewController.selectedFontDescriptor else { return }
let font = UIFont(descriptor: descriptor, size: 36)
myLabel.font = font
}

Implementing Button in NavigationItem

navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Choose Font", style: .plain, target: self, action: #selector(chooseFontPickerButtonPressed))

In the following code, we are presenting the UIFontPickerController.

@objc func chooseFontPickerButtonPressed() {
present(fontPicker, animated: true)
}

Build and Run!

Result look this

Extra Delegate Method

If you want to, you can optionally also add the fontPickerViewControllerDidCancel() method, which will be called if the user cancels the font picker rather than selecting a font:

func fontPickerViewControllerDidCancel(_ viewController: UIFontPickerViewController) {
    // handle cancel event here
}

Three Useful Properties to Customize

• displayUsingSystemFont will show each font in the default system font, rather than using the font itself. This sacrifices some usefulness for legibility. (This is false by default.)
• includeFaces adds a dropdown arrow next to each font type, letting users select different weights and options. (This is also false by default.)
• filteredTraits is an array of traits that limit the types of font you want to show. (This is empty by default, so all fonts are shown.)

For example, if we wanted to show a font picker in system fonts, with faces included, but only showing serif fonts (think Times New Roman rather than Helvetica), we’d write code like this:

let configuration = UIFontPickerViewController.Configuration()
configuration.includeFaces = true
configuration.displayUsingSystemFont = true
configuration.filteredTraits = [.classModernSerifs]
let vc = UIFontPickerViewController(configuration: configuration)

Conclusion

That’s it for this piece we have implemented the new iOS 13 feature UIFontPickerController. Implement this new iOS 13 features in your iOS application to give users the ability to select different font styles.

Source Code

You can find the full project on Github.

If you are preparing for your technical coding interview or you want to learn recursion to improve your problem-solving skills then you should definitely check this free udemy course Master the Recursion from Beginner to Advance Level

Additional Resources

If you want to learn ARKit 3 from beginner to expert level then click here to get the course and also you will get 97% discount.

If you are passionate about learning mobile development for iOS and looking to take your iOS development skills to the next level, Core Data with CloudKit framework should be at the top of your list. Click here to get the course and also you will get 97% discount.

Learn SwiftUI from Scratch click here to get the course because in this course we are going to build many apps using SwiftUI such as Facebook clone, News app, Notes app and much more.