A wrapper for handling fonts in iOS
Hi All, Hope you are doing great!. In this tutorial, I will walk you through how to make a wrapper object to handle all your custom fonts in iOS. let’s start…
Fonts add value to your text. It helps readers to perceive information from the text. The correct choice of colour, font and text size can prove to be vital for attracting your target audience. It’s easy to attract the readers using typography but holding their attention requires more creativity.
TTF and OTF are extensions that are used to indicate that the file is a font, which can be used in formatting the documents for printing. TTF stands for TrueType Font, a relatively older font, while OTF stands for OpenType Font, which was based in part on the TrueType standard.
A significant difference between the two is in their capabilities. TTF depends solely on glyph tables that define how each character looks while OTF is able to use glyphs along with CCF (Compact Font Format) tables.
- How to add custom fonts in iOS:
- First get the required fonts files (either TTF or OTF) from web or your UIDesigner
- Move them into your project folder(make sure copy if needed and your target are selected).
- Double check that your fonts are included as Resources in your bundle by selecting your project root folder from navigation pane, and then ‘Build Phases’ from your target. Then expand ‘Copy Bundle Resources’ row, to see your font files over there. If they are not there, select the files in the navigator pane, add them to your target manually.
- Open Info.plist, and then Right click and choose “Add Row”.
- Start typing and select “Fonts provided by application”.
- Expand the row and next to Item 0 in the Value field enter the name of the font(including its type, for example see the following image).
→ Now you know the value of font, and how to add custom fonts to the iOS projects. Now let’s code a wrapper object to handle the fonts in the project. in development phase, at any time the font sizes, or its styles may change depends on UI look and feel. So by using this wrapper we can handle those changes easily without much time and effort.
→ First we create a struct to encapsulate all the required types to access in order to create and return the fonts. we use enums for the types, as they come in very handy for the use case. They are also value types, so no need to worry about the retain cycles as well.
- First creating a struct object, define an enum type to select or pass the required Font name. This type returns a value, which is computed property, by depending on selected case. in this tutorial I used “SFProDisplay” & “SFProText” fonts(custom) and also provided a custom case to access the predefined system(custom) fonts.
- Next add another enum type for selecting TraitType. usually, it gives options to select the style of the font(like Bold, italic, etc).
- Next another enum for FontSize, you can create any number of cases for all these enums so far defined. it depends on your use case. in the following standard and heading cases return constant values, as what I need in the project. in future if UIDesigner says to reduce the size for all headings of the view controllers, I simply change the value here. So feel free to define as many cases as you required. For some custom sizes, there is also a custom case with associated value of type CGFloat.
- Finally add a static method which returns of type UIFont, which is constructed with the passed arguments to the function call.
- In the above code snippet, depending on the FontType, we get the fontName value. Then we decompose the value into two by separated by “-” character. The first one tells the name of the font and the last one tells the style of the font. So first we check if the ‘UIFont.familynames’ Contains the font we selected. And then if the selected style is not there for that selected font, we construct the Font type, with the Apple’s API, just giving only the font name. OR
- If the selected font contains the selected style, we construct the Font type by giving both font name and its style.
How to use :
The above Font object, does not cover the system font. except the system font, you can use all the remaining fonts. you can use system apis to construct the system font types if you need. if you want to cover for all the types include them in the FontType enum. if you want to know more about handling fonts in iOS, Please check the resources below I provided.
That’s all for now. happy coding, and if you come across any better resources or approaches please share with me. You can find the sample project here.
- TTF vs OTF
- Apple documentation for adding custom fonts
- common mistakes while adding custom fonts
- Another medium great tutorial for the same
— — — — — — — — — *********************** — — — — — — — — —
Thanks for reading…