Part 3: Font

The material design docs state that each brand can use its own specific typeface. I choose to use Roboto with the weights thin, light, regular, medium, bold. You can find a ton of great fonts here at Google’s newly redesigned font’s page. I choose to use those weights because its an even jump from 100–300–400–500–700. Now, using custom fonts in an XCode project can be really annoying if you don’t get the basic setup right. There is a total of 3 steps to add a custom font to a project.

1. Drag and Drop

The first step is get the .ttf/.otf file in within Finder and just drop the file into your project. I usually put in in the Supporting Files folder of my projects.

2. plist

Next open up your Info.plist file. Hover over the Information Property List there should be a + button with a gray background, click it. A field will then pop up and you can scroll or type until you get Fonts provided by application you will need to click that. Then you will type in the items you need for me item 0 is Roboto-Light.ttf, item 1 is Roboto-Medium.ttf, etc. Just make sure the names include either .ttf or .otf that file you dragged into your project.

3. Build Phases

You will need to click on your project within the Navigator then go to Build Phases tab. Within that tab you will need to click the Copy Bundle Resources to expand it. Once expanded click the + again and then click whatever fonts your want to add.

Using the font

Using the font is that same as using the colors which can be found here, except with fonts we don’t need a custom initializer. With the font we can use a Struct or extend UIFont with functions. I chose to use a Struct and an Enum as my approach. The Enum holds all the typefaces.

enum Typeface: String {
   case Regular = "Roboto-Regular"
   case Thin = "Roboto-Thin"
   case Medium = "Roboto-Medium"
   case Bold = "Roboto-Bold"
   case Light = "Roboto-Light"
}  

This approach made it so i DID need a custom initializer instead of just using a Struct. The initializer should take an instance of Typeface and the Size of the font.

extension UIFont {
   convenience public init(name: Typeface, size: CGFloat) {
      self.init(name: name.rawValue, size: size)!
   }
}

Now in the Struct you can just declare whatever types you need like so.

struct Font {
   let mediumEight = UIFont(name: .Medium, size: 8.0)
   let regularSixteen = UIFont(name: .Regular, size: 16.0)
   let thinFourty = UIFont(name: .Thin, size: 40.0)
}

This approach will work just fine but it makes type completion a headache if you have a ton of fonts.

Instead I think its best to separate all different font weights into their own Structs.

struct Font {
   struct Medium {
      let eight: UIFont = UIFont(name: .Medium, size: 8.0)
   }
   struct Regular {
      let sixteen: UIFont = UIFont(name: .Regular, size: 16.0)
   }
   struct Thin {
      let fourty: UIFont = UIFont(name: .Thin, size: 40.0)
   }
}

Now when we use a font its simply.

Font.Thin().fourty

Thanks for reading, if you liked it don’t be shy to make that little heart blue. Next up “Header/App Bar”.