Using custom fonts in interface builder

Question

I've searched this site but I just found unanswered questions.

I've loaded a custom font into my xcode project. A [UIFont fontWithName:@"Laconic-Light" size:19] works. But interface builder doesn't like the font. I can't use it with IB it always shows the default font. Is there a way to tell IB that its ok to use the font?

Answer 1

I have also this problem in Xcode 4. In my program, there are lots of UILabel which have no IBOutlets so I do in that way;

First, subclass the UILabel to CustomFontLabel

Then, override the "awakeFromNib" method

@implementation CustomFontLabel

- (void)awakeFromNib {
    [super awakeFromNib];
    self.font = [UIFont fontWithName:@"CustomFontName" size:self.font.pointSize];
}

@end

Finally, in Interface Builder > Identity Inspector change class to CustomFontLabel.

Answer 2

Another solution would be to subclass UILabel to load in your custom font. You can then reference it in IB, although you still cannot see the proper font.

Answer 3

I prefer to do this in a slightly more generic way, which let's you size your text within Interface Builder, and simply replace the fonts at runtime.

I create an IBCollection property for any UIKit elements to set a font to, then wire up the appropriate items from IB.

@property (strong, nonatomic) IBOutletCollection(id) NSArray *lightFontItems;
@property (strong, nonatomic) IBOutletCollection(id) NSArray *regularFontItems;

Then in my view did load I use a method like this:

[self setFontName:@"Roboto-Light" onItemsInArray:[self lightFontItems]];
[self setFontName:@"Roboto-Regular" onItemsInArray:[self regularFontItems]];

And the setLightFontOnItemsInArray: method looks like this:

+ (void)setFontName:(NSString *)fontName onItemsInArray:(NSArray *)array;
{
  [array each:^(id item) {
    if (![item respondsToSelector:@selector(setFont:)]) return;
    [item performSelector:@selector(setFont:) withObject:[UIFont fontWithName:fontName size:[[item font] pointSize]]];
  }];
}

Answer 4

You can install this script http://pitaya.ch/moarfonts/.

Works really well for me with xcode 5.1.1.

Answer 5

Thanks to apple, in Xcode 6, we have custom fonts available in interface builder itself.

1. Add the .ttf font file to your bundle
2. Add the font name to the .plist file.
3. Go to the xib/storyboard file, you can see your font.

Answer 6

Swizzle a Font

The solution is generally straightforward if you swizzle the UIFont class. I think it is best to pick a sane font like Helvetica Neue and override that. This allows you to put the whole project back into the standard by pulling the mapping. I had already come up with a swizzle to achieve this goal when I realized someone else did it too so I mashed it up a bit. As NSHipster will tell you swizzling can be dangerous, but in this case the risk is pretty low considering the absolute simplicity of the UIFont API. In my case it was done for an Enterprise app so it was even lower risk.

UIFont+CustomFont.m Category

#import <objc/runtime.h>

static NSString *const kFontMapPlist = @"FontMap";
static NSDictionary *_replacementFontDictionary = nil;



@implementation UIFont (CustomFont)


static void initializeReplacementFonts()
{
    static BOOL initialized = NO;
    if (initialized)
        return;
    initialized = YES;

    // A Plist with a Dictionary from->to font name mapping
    NSURL *replacementFontMapURL = [[NSBundle mainBundle] URLForResource:kFontMapPlist withExtension:@"plist"];
    NSDictionary *replacementFontMap = [NSDictionary dictionaryWithContentsOfURL:replacementFontMapURL];
    [UIFont setReplacementFontDictionary:replacementFontMap];
}

+ (void)load
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        initializeReplacementFonts();

        SEL fontWithNameSizeSelector = @selector(fontWithName:size:);
        SEL swizzledFontWithNameSizeSelector = @selector(clp_fontWithName:size:);
        SwizzleClassMethod([UIFont class], fontWithNameSizeSelector, swizzledFontWithNameSizeSelector);

        SEL fontWithDescriptorSizeSelector = @selector(fontWithDescriptor:size:);
        SEL swizzledfontWithDescriptorSelector = @selector(clp_fontWithDescriptor:size:);
        SwizzleClassMethod([UIFont class], fontWithDescriptorSizeSelector, swizzledfontWithDescriptorSelector);
    });
}

void SwizzleClassMethod(Class class, SEL originalSelector, SEL replacementSelector)
{
    Class clazz = objc_getMetaClass(class_getName(class));

    Method originalMethod = class_getClassMethod(clazz, originalSelector);
    Method replacementMethod = class_getClassMethod(clazz, replacementSelector);

    // Add method if it doesn't eixst
    BOOL didAddMethod =
    class_addMethod(clazz,
                    originalSelector,
                    method_getImplementation(replacementMethod),
                    method_getTypeEncoding(replacementMethod));


    if (didAddMethod) {
        class_replaceMethod(clazz,
                            replacementSelector,
                            method_getImplementation(originalMethod),
                            method_getTypeEncoding(originalMethod));
    } else {
        method_exchangeImplementations(originalMethod, replacementMethod);
    }
}



#pragma mark - Swizzled font by descriptor and name calls

+ (UIFont *)clp_fontWithDescriptor:(UIFontDescriptor *)descriptor size:(CGFloat)pointSize
{
    NSString *originalFontName = descriptor.fontAttributes[UIFontDescriptorNameAttribute];
    NSString *replacementFontName = _replacementFontDictionary[originalFontName];

    UIFontDescriptor *replacementFontDescriptor = descriptor;
    if (replacementFontName != nil) {
        replacementFontDescriptor = [UIFontDescriptor fontDescriptorWithFontAttributes:@{UIFontDescriptorNameAttribute: replacementFontName}];
    }

    return [self clp_fontWithDescriptor:replacementFontDescriptor size:pointSize];
}

+ (UIFont *)clp_fontWithName:(NSString *)fontName size:(CGFloat)fontSize
{
    NSString *replacementFontName = _replacementFontDictionary[fontName];
    if (replacementFontName == nil) {
        replacementFontName = fontName;
    }

    return [self clp_fontWithName:replacementFontName size:fontSize];
}



#pragma mark - Replacement Dictionary Getter and Setter

+ (NSDictionary *)replacementDictionary
{
    return _replacementFontDictionary;
}

+ (void)setReplacementFontDictionary:(NSDictionary *)replacmentFontDictionary
{
    if (replacmentFontDictionary == _replacementFontDictionary) {
        return;
    }

    _replacementFontDictionary = replacmentFontDictionary;

    // Validate font existence.
    for (NSString *originalFontName in [_replacementFontDictionary allKeys]) {
        NSString *replacementFontName = [_replacementFontDictionary objectForKey:originalFontName];
        UIFont *replacementFont = [UIFont fontWithName:replacementFontName size:10.0f];
        if (replacementFont == nil) {
            DDLogError(@"WARNING: replacement font '%@' is not available.", replacementFontName);
        }
    }
}

@end

The FontMap.plist

For the sake of simplicity we'll pretend we have a font called CustomSans.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>HelveticaNeue-Light</key>
    <string>CustomSans-Light</string>
    <key>HelveticaNeue-LightItalic</key>
    <string>CustomSans-LightItalic</string>
    <key>HelveticaNeue-Bold</key>
    <string>CustomSans-Bold</string>
    <key>HelveticaNeue-BoldItalic</key>
    <string>CustomSans-BoldItalic</string>
</dict>
</plist>