Designing labels/text views with custom fonts in Interface Builder

Question

I am currently working on an iPhone project in which all labels/text views etc. should appear with a custom font (I'm using Xcode 4.2.1). I have done some research on this, and the only solution seems to be adding the font files to the project, editing the info.plist file appropriately and setting the font programmatically (i.e. by outlets or by subclassing the relevant views). In any case, these approaches won't lead to the interface builder displaying the text with the custom font (it will still show Helvetica). It is not possible to select the custom font using the attributes inspector.

Although I don't think I missed something, I just want to make sure there is no other way than programmatically setting the fonts, which would be a rather painful for the task I have to work on (localization issues, unique app design etc.). It would be nice to get the interface builder to display custom fonts..

Answer 1

Custom fonts can only be set programmatically..Unfortunately..this is termed as a bug in interface builder and hasn't been fixed yet.

Answer 2

using custom fonts in Interface Builder a reusable library is available.

It uses a simple trick for doing this. Set the font(say calibri) to all of your UI Elements that you will never use in your project and FontReplacer will do mapping between custom font and calibri. So there is no need to make IBOutlets or any other graphics.

Here is link to github from where you can download FontReplacer to use in your project. https://github.com/0xced/FontReplacer

another question is addressing same Fonts not displaying in Interface Builder i have also posted possible solution there

Answer 3

As of XCode 6 it now sees the font that I needed to import (Lato).

Haven't tested it much, but works for plain text labels and doesn't for attributed ones. Atrributed shows fine in Interface Builder but defaults to system font at runtime.

Still much better to have it there visually or combine text labels to achieve "attributed" text though!

Answer 4

It's really inconvenient. While waiting for this feature, I think this will help you organize your code regarding the font in iOS project.

In the shared class you use to define some global variables like Common.h, you define the fonts you may use

#define FONT_LATO_REGULAR(s) [UIFont fontWithName:@"Lato-Regular" size:s]
#define FONT_LATO_LIGHT(s) [UIFont fontWithName:@"Lato-Light" size:s]
#define FONT_LATO_BOLD(s) [UIFont fontWithName:@"Lato-Bold" size:s]

Then you import the Common.h (your shared class) into class you are implementing, set font for label by:

_lblTitle.font = FONT_LATO_BOLD(14.0);

Finally, you can put all font settings into a method for further modification.

- (void) setFontForLabels {
    _lblTitle.font = FONT_LATO_BOLD(14.0);
    _lblTime.font = FONT_LATO_REGULAR(13.0);
    _lblLocation.font = FONT_LATO_REGULAR(13.0);
}

It may help you a little. Please make sure you imported your fonts into splist file already.

Answer 5

Applicable for iOS 5.0 & Above.

Create a custom UI-Element(UIButton, UILabel, UITextField etc) class & simply change the class name for the particular element in storyboard for which you want to reflect the change.

Below is the code for custom button. You can do the same for any other element you want.

CustomButtton.h

@interface CustomButtton : UIButton

@end

CustomButtton.m

@implementation CustomButtton

    - (void)awakeFromNib {
        // Initialization code

        if ([self isFontBold:self]) {

            self.titleLabel.font = [UIFont fontWithName:@"LaoUI-Bold" size:self.titleLabel.font.pointSize];

        } else {

            self.titleLabel.font = [UIFont fontWithName:@"LaoUI" size:self.titleLabel.font.pointSize];
        }

        NSLog(@"Fonts:%@",[UIFont familyNames]);
    }

    -(BOOL)isFontBold:(UIButton *)sender {

        UIFont *font = self.titleLabel.font;
        UIFontDescriptor *fontDescriptor = font.fontDescriptor;
        UIFontDescriptorSymbolicTraits fontDescriptorSymbolicTraits = fontDescriptor.symbolicTraits;
        return (fontDescriptorSymbolicTraits & UIFontDescriptorTraitBold);
    }

@end

Now simply set the font size & type (Bold or Normal). It will automatically update the element with custom font.

By : [UIFont familyNames] - You can check whether your custom font family is included by the application or not which you have defined in .plist file.

Secondly: You have to add a key in .plist file of your project as shown in below screenshot:

Answer 6

I haven't tried this with earlier versions, but with XCode 6, If you have the font installed correctly in your project AND you install the fonts on your Mac, by using Font Book for instance, XCode shows the fonts in the font picker, allows you to set multiple custom fonts and sizes in a single label, and seems to actually use the correct fonts at runtime.

It's not all roses. Interface Builder's attribute controls are a still a mess. It frequently loses track of the assigned properties, particularly if you try to attribute more than a single paragraph at once. Font colors don't stick very well. Overlapping selections just confuse it incredibly, for instance if your label has two paragraphs, with two different fonts and you select both and change the font size, it may set the attributes of one or both paragraphs to a system default.

Answer 7

You can set custom font in the storyboard or xib with attibutes inspector, please ref to Custom font in a storyboard?

Answer 8

You can use a simple trick to use custom fonts in interface builder. Here is descriptive tutorial that might help you in this regard Click Here for tutorial