Xcode 15 not reflecting fonts used in storyboard – Xcode

by
Ali Hasan
axios fonts storyboard xcode

Quick Fix: Update Xcode to 15.0.1 or later versions: The issue with incorrect font loading in Interface Builder documents has been resolved in Xcode 15.0.1. Updating to the latest version of Xcode will fix this problem.

The Problem:

After updating to Xcode 15, the fonts used in the storyboard are not accurately displayed in the application when run on an iOS device or a simulator. This issue occurs despite having defined the fonts in the storyboard. Is there a solution that eliminates the need for programmatically setting fonts, as suggested by Apple in their release notes?

The Solutions:

Solution 1: Known Issue in Xcode 15

The issue of fonts not being reflected properly in storyboard when running the app on an iOS device or simulator is a known issue in Xcode 15. It was present in early betas and is still present in the official release. This bug is identified as (113624207) and reported on Apple’s developer documentation.

Workaround:

The only workaround provided by Apple is to set the font manually in code. This can be done by creating a UILabel/UIButton subclass that sets a font by reading "User Defined Runtime Attributes." This way, you can avoid adding font-related code to all your classes.

Another workaround is to continue using Xcode 14. However, it’s essential to ensure that you do not update to macOS Sonoma, as doing so will prevent you from using Xcode 14.

Note:

The issue has been resolved in Xcode 15.0.1. If you are still experiencing this problem, ensure that you update to the latest version of Xcode.

Solution 2: Extension to UILabel/UIButton/UITextField

To tackle the issue of Xcode 15 not reflecting fonts set via storyboards, you can create extensions for UILabel/UIButton, and UITextField. These extensions expose an @IBInspectable property that accepts the size for a specific custom font. By setting this value within the storyboard or xib, the font will be applied to the label, button, or text field as if it were set programmatically.

Here’s an example of such an extension:

extension UIButton {
    @IBInspectable
    var robotoMedium: CGFloat {
        set {
            titleLabel?.font = UIFont(name: "Roboto-Medium", size: newValue)
        }
        get {
            return 0.0
        }
    }
    
    @IBInspectable
    var robotoNormal: CGFloat {
        set {
            titleLabel?.font = UIFont(name: "Roboto-Regular", size: newValue)
        }
        get {
            return 0.0
        }
    }
    
    @IBInspectable
    var robotoBold: CGFloat {
        set {
            titleLabel?.font = UIFont(name: "Roboto-Bold", size: newValue)
        }
        get {
            return 0.0
        }
    }
}

In this extension:

  • We define @IBInspectable properties named robotoMedium, robotoNormal, and robotoBold for the UIButton.

  • Each property has a setter that assigns the font to the button’s titleLabel using the specified font name and size.

  • The getter is included for completeness, but it always returns 0.0.

By using these properties in your storyboard or xib, you can easily set the font for your buttons without having to write any code. This approach allows you to leverage the convenience of the storyboard while still maintaining control over the font selection.

Solution 3: Update to Xcode 15.0.1

Apple released Xcode 15.0.1, which addresses the issue of fonts not being reflected properly in storyboards. To resolve the problem, you can update Xcode by following these steps:

  1. Open the App Store on your Mac.
  2. Search for Xcode.
  3. Click on the Update button next to Xcode.
  4. Once the update is complete, restart Xcode.

After updating to Xcode 15.0.1, the fonts should be reflected correctly when running your application on both iOS devices and simulators.

Q&A

Custom fonts not displaying correctly in Xcode 15 storyboard

Known issue in Xcode 15, workaround is to set fonts programmatically or use Xcode 14.

Is there a workaround to avoid setting fonts programmatically?

Yes, you can subclass UILabel/UIButton and expose a custom font size via @IBInspectable.

When did Xcode update solve the issue?

The issue was resolved in Xcode 15.0.1, as per the release notes.

Video Explanation:

The following video, titled "”iOS", provides additional insights and in-depth exploration related to the topics discussed in this post.

Play video

”iOS

iOS : Xcode custom fonts …”]