Custom Font Sizing in XCode6 Size Classes not work

Question

Xcode 6 has a new feature where fonts and font sizes in UILabel, UITextField, and UIButton can be set automatically based on the size class of the current device configuration, right in the storyboard. For example, you can set a UILabel to use font size 12 on "any width, compact height" (such as on iPhones in landscape) configurations and size 18 on "regular width, regular height" configurations (such as on iPads). More information is available here:

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/Size-ClassSpecificLayout.html

This is a really great feature in theory because it could make it unnecessary to programmatically set different fonts on UI features based on the device configuration. Right now, I have some conditional code that sets the fonts based on the device type, but obviously that means I have to set the fonts programmatically everywhere throughout the app. So I was initially really excited about this feature, but I found that it has a serious problem in actual usage for me (perhaps a bug). Note that I am building against SDK 8 and setting a minimum deployment target of iOS 8 so this has nothing to do with compatibility with old versions of iOS.

The problem is this: If I set different font sizes for different size classes, and use the "System" font provided by iOS, everything works as expected and the font sizes change based on the size class. If I use a custom font provided by my application (yes, I have it set up correctly in my application bundle, as it works programmatically) and set the custom font to a label in an XCode 6 storyboard, that also works as expected. But when I try to use different sizes of the custom font for different size classes, in the storyboard, it suddenly doesn't work. The only difference in configuration is the font I've chosen (a custom one vs. the System font). Instead, all of the fonts show up on the device and simulator as the default system font at the default size, regardless of size class (and I verified via the debugger that it is substituting the system font for the actual one specified in the storyboard). So basically the size class feature appears to be broken for custom fonts. Also, interestingly, the custom fonts actually display and adjust size properly in the XCode 6 "Preview" pane for the view controller: it's only when running on the actual iOS system that it stops working (which makes me think that I'm configuring it correctly).

I tried multiple different custom fonts and it doesn't seem to work for any of them, but it always works if I use "System" instead.

Anyway, has anyone else seen this problem in Xcode 6? Any ideas on whether this is a bug in iOS 8, Xcode, or something I'm doing wrong? The only workaround I've found, like I said, is to continue to programmatically set the fonts like I have been for about 3 versions of iOS, because that does work. But I'd love to be able to use this feature if I could get it to work with custom fonts. Using the System font is not acceptable for our design.

---

ADDITIONAL INFO: As of Xcode 8.0, bug is fixed.

Answer 1

A combination of some of the later answers above were helpful. Here's how I solved the IB bug via a Swift UILabel extension:

import UIKit

// This extension is only required as a work-around to an interface builder bug in XCode 7.3.1
// When custom fonts are set per size class, they are reset to a small system font
// In order for this extension to work, you must set the fonts in IB to System
// We are switching any instances of ".SFUIDisplay-Bold" to "MuseoSans-700" and ".SFUIDisplay-Regular" to "MuseoSans-300" and keeping the same point size as specified in IB

extension UILabel {
    override public func traitCollectionDidChange(previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)

        if ((traitCollection.verticalSizeClass != previousTraitCollection?.verticalSizeClass) || traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass) {
            //let oldFontName = "\(font.fontName)-\(font.pointSize)"

            if (font.fontName == systemFontRegular) {
                font = UIFont(name: customFontRegular, size: (font?.pointSize)!)
                //xlog.debug("Old font: \(oldFontName) -> new Font: \(font.fontName) - \(font.pointSize)")
            }
            else if (font.fontName == systemFontBold) {
                font = UIFont(name: customFontBold, size: (font?.pointSize)!)
                //xlog.debug("Old font: \(oldFontName) -> new Font: \(font.fontName) - \(font.pointSize)")
            }
        }
    }
}

Answer 2

The problem is still there that you cannot use the feature to set Fonts for different size classes from interface builder.

Just set font based on the device you want just like below:

if (Your Device is iPAd) //For iPad
{
   [yourLabel setFont:[UIFont fontWithName:@"FontName" size:FontSize]]; 
}
else  //For Other Devices then iPad
{
   [yourLabel setFont:[UIFont fontWithName:@"FontName" size:FontSize]]; 
}

This works perfectly on all devices.

Answer 3

Still no signed right answer. This code works fine for me. You must disable font size for size classes in interface builder first. In IB you can use custom font.

- (void) traitCollectionDidChange: (UITraitCollection *) previousTraitCollection {
    [super traitCollectionDidChange: previousTraitCollection];

    if ((self.traitCollection.verticalSizeClass != previousTraitCollection.verticalSizeClass)
        || self.traitCollection.horizontalSizeClass != previousTraitCollection.horizontalSizeClass) {

         self.textField.font = [UIFont fontWithName:textField.font.fontName size:17.f];

    }
}

Answer 4

I've come up with even faster fix (I assume you always use your one custom font).

Create a category for UILabel and include in files using buggy storyboard with size classes and dedicated font setting for various classes:

@implementation UILabel (FontFixForSizeClassesAppleBug)

- (void)layoutSubviews
{
    [super layoutSubviews];
    if([[UIFont systemFontOfSize:10].familyName isEqualToString:self.font.familyName]) {
        //workaround for interface builder size classes bug which ignores custom font if various classes defined for label: http://stackoverflow.com/questions/26166737/custom-font-sizing-in-xcode6-size-classes-not-working-properly-w-custom-fonts
        self.font = [UIFont fontWithName:@"YOUR_CUSTOM_FONT_NAME" size:self.font.pointSize];
    }
}

@end

Just use your custom fonts in storyboard. When buggy interpreter will use system font instead your own this category will switch it to your custom font.

Answer 5

Similar solution to @razor28's one but I think a little more universal. Also, works fine on older iOS versions

https://gist.github.com/softmaxsg/8a3ce30331f9f07f023e

Answer 6

I had the same problem and found one not really clear, but fine solution!

1. First you set the required font size in storyboard with system font name.
2. Then to this label you assign a tag from 100 to 110 (or more, but 10 was always enough for me in one view controller).
3. Then put this code to your VC's source file and don't forget to change font name. Code in swift.

override func viewDidLayoutSubviews() {
    for i in 100...110 {
        if let label = view.viewWithTag(i) as? UILabel {
            label.font = UIFont(name: "RotondaC-Bold", size: label.font.pointSize)
        }
    }
}