Embedding and Selecting Fonts - Pixate/pixate-freestyle-ios GitHub Wiki

iOS comes with a rich selection of default fonts; however, typography, being an important aspect of design, oftentimes requires the use of fonts outside of the iOS defaults. Fortunately, it's fairly straight forward to include new fonts in your application. This post goes into those details along with a discussion of the CSS used to select an included font and its variants.

To begin this process, you will need to acquire your desired font in TrueType format (.ttf files). For this post, we'll use a popular open source font called Open Sans. Simply visit that link and download the selected collection of fonts as a zip file. Unzip the archive and add the fonts to your project. In the screenshot below, these fonts have been added to a "Fonts" folder. Be sure each font is included in your build target.

Next, we need to let iOS know about these fonts. You can do this by editing your application's plist file. Add a "Fonts provided by application" array and add each file name as an item in that array.

That's all that is needed to include Open Sans in our application. All variants of the font are registered with iOS so they can be accessed the same as any other built-in font. Next we'll discuss how we reference these using CSS.

In CSS, a font is specified using a number of properties: font-family, font-weight, and font-style, among others. A logical first step is to specify the name of the font you wish to use. This is captured by the font-family property.

This is our first challenge. What is the name of this font? It's tempting to use the PostScript name, which is the filename minus the .ttf; however, that doesn't work. What we need is the font family name. One way you can find this is via "Get Info" in the Finder. Looking at the info for OpenSans-Regular.ttf, we see that the font name is "Open Sans".

This is the name we need to use for the font-family property. Since the name has a space in it, we will surround the full name in quotes.

font-family: "Open Sans";

Now that we have the family, lets determine which weight we want to use.

The next challenge in CSS is in determining which font weight you want. This is specified by the font-weight property. If we look at the font-weight Property Specification, we find that we select the weight using a number. For me, this is not intuitive, so I oftentimes end up referring to the table below:

• 900: Black, Heavy (black, heavy)
• 800: ExtraBold, UltraBold (extra-bold, ultra-bold)
• 700: Bold (bold)
• 600: SemiBold, DemiBold (semi-bold, demi-bold)
• 500: Medium (medium)
• 400: <normal> (normal)
• 300: Light (light)
• 200: ExtraThin, UltraThin (extra-thin, ultra-thin)
• 100: Thin (thin)

What this says is that if you want a, say, black variant of your font, then you need to set the font weight to 900. Note that you can use the keywords 'normal' and 'bold' in place of 400 and 700, respectively. The Pixate Engine extends these keywords to include the values in parenthesis. Note, however, that these are not standard to CSS, so these will only work in the Pixate Engine.

font-weight: 900;
font-weight: black;

Next, lets determine the font style we wish to use.

Our last property is font-style. This is used to determine if we want to use a normal, italic, or oblique version of the font. With Open Sans, we have regular (normal) and italic only, so those are the only two values we need.

font-style: normal;
font-style: italic;

Now lets put all of these properties together.

Now that we know the three properties to set for each variation of a font, lets build an example to select each variant of Open Sans. The CSS below does just that. Each rule set selects a single text field by id and includes a comment indicating which version of Open Sans the properties select. Simply create a default.css file and paste in the contents below. Make sure the default.css is included in your build target.

#textField1 {
    /* OpenSans-Bold */
    font-family: "Open Sans";
    font-weight: 700;
}

#textField2 {
    /* OpenSans-BoldItalic */
    font-family: "Open Sans";
    font-weight: 700;
    font-style: italic;
}

#textField3 {
    /* OpenSans-ExtraBold */
    font-family: "Open Sans";
    font-weight: 800;
}

#textField4 {
    /* OpenSans-ExtraBoldItalic */
    font-family: "Open Sans";
    font-weight: 800;
    font-style: italic;
}

#textField5 {
    /* OpenSans-Italic */
    font-family: "Open Sans";
    font-style: italic;
}

#textField6 {
    /* OpenSans-Light */
    font-family: "Open Sans";
    font-weight: 300;
}

#textField7 {
    /* OpenSans-LightItalic */
    font-family: "Open Sans";
    font-weight: 300;
    font-style: italic;
}

#textField8 {
    /* OpenSans-Regular */
    font-family: "Open Sans";
    font-weight: 400;
}

#textField9 {
    /* OpenSans-SemiBold */
    font-family: "Open Sans";
    font-weight: 600;
}

#textField10 {
    /* OpenSans-SemiBoldItalic */
    font-family: "Open Sans";
    font-weight: 600;
    font-style: italic;
}

Next, we use Interface Builder to layout a collection of UITextFields. Starting from the top, we give each a styleId (using User Defined Runtime Attibutes) to match the ids in the CSS above. And when we run the app with the Pixate Engine, we see the following:

In this tutorial, we have learned the following:

• How to include TrueType fonts in our application
• How to determine the font-family of those fonts
• How to select a specific style of that font.

Now it's easy to include whatever font you desire in your iOS application and the Pixate Engine gives you the tools to use those fonts via CSS. Enjoy!

[Published: 2013-04-09]