How to make a UIButton resize its custom font text using `configurationUpdateHandler`?

Question

Created Apr ’25

Replies 3

Boosts 0

Participants 3

I've read in this post that in order to make the configuration of UIButton adjust my custom font's size automatically I need to add implementation to recalculate the font's size inside configurationUpdateHandler. But how would this look like?

I also read something about matching the font's text style. But at this point I'm just guessing. Here's the code:

let loginButton = UIButton(configuration: config, primaryAction: nil)
loginButton.configurationUpdateHandler = { button in
    guard var config = button.configuration else { return }

    let traits = button.traitCollection

    let baseTitleFont = UIFont.customFont(ofSize: 18, weight: .semibold)
    let baseSubtitleFont = UIFont.customFont(ofSize: 18, weight: .regular)

    let scaledTitleFont = UIFontMetrics(forTextStyle: .body).scaledFont(for: baseTitleFont, compatibleWith: traits)
    let scaledSubtitleFont = UIFontMetrics(forTextStyle: .body).scaledFont(for: baseSubtitleFont, compatibleWith: traits)

    config.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
        var outgoing = incoming
        outgoing.font = scaledTitleFont
        return outgoing
    }

    config.subtitleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
        var outgoing = incoming
        outgoing.font = baseSubtitleFont
        return outgoing
    }

    button.configuration = config
}

Thanks in advance!

Boost

Answer 1

Abrasive OP

Apr ’25

Here's a visualization.

With custom font: Screenshot 2025-04-22 at 13.20.09.png

With system font (no font defined): Screenshot 2025-04-22 at 13.27.01.png

I want the same result but with the custom font.

0

Answer 2

Claude31 OP

Apr ’25

loginButton.configurationUpdateHandler is called only on change of button state.

So, have you checked the handler is ever called ?

See details here: https://sarunw.com/posts/dynamic-button-configuration/

1

Answer 3

DTS Engineer OP

Apple

Apr ’25

You should checkout UIKit Catalog: Creating and customizing views and controls for various configuration examples for UIButtons.

Here's an example on how to configure the title and font of a UIButton:

 if #available(iOS 15, *) {
            // Use UIButtonConfiguration to set the image.
            var buttonConfig = UIButton.Configuration.plain()
            
            // Set up the symbol image size to match that of the title font size.
            buttonConfig.preferredSymbolConfigurationForImage = UIImage.SymbolConfiguration(textStyle: .body)
            buttonConfig.image = buttonImage
    
            button.configuration = buttonConfig
        } else {
            button.setImage(buttonImage, for: .normal)
            
            // Set up the symbol image size to match that of the title font size.
            let config = UIImage.SymbolConfiguration(textStyle: .body, scale: .small)
            button.setPreferredSymbolConfiguration(config, forImageIn: .normal)
        }
        
        guard let customFont = UIFont(name: "CustomFont-Light", size: UIFont.labelFontSize) else {
            fatalError("""
                Failed to load the "CustomFont-Light" font.
                Make sure the font file is included in the project and the font name is spelled correctly.
                """
            )
        }        
        // Set the button's title and font.
        button.setTitle(NSLocalizedString("Person", comment: ""), for: [])
        button.titleLabel?.font = UIFontMetrics.default.scaledFont(for: customFont)
        button.titleLabel?.adjustsFontForContentSizeCategory = true

1