Tutorial: Porting fonts to the iPhone
Ever wanted to port your favourite font so that you can use it on your iPhone? It may be easier than you think. This guide will cover the method that I used to port pix Chicago to the iPhone for use in the iOS’86 theme.
The tools that I use in this guide:
This guide requires a Windows machine.
This guide was written for iOS 6, however the same method can be adapted for iOS 7+
The default fonts
First up we need to grab the default fonts from your device. These are located in:
Copy the following fonts to your desktop:
- _H_Helvetica.ttc (used in small instances around iOS)
- _H_HelveticaNeue.ttc (the main system font)
- _H_HelveticaNeueExtras.ttc (system extras — Siri)
- LockClock.ttf (used for the lock screen clock only)
- MarkerFeltThin.ttf (used in the notes app)
- PhoneKeyCaps.ttf (keyboard font)
- PhonepadTwo.ttf (calculator and phone dialer font)
Now you may notice that the three Helvetica fonts have the ttc extension rather than ttf — this is a TrueType Collection, and makes the job of porting just a bit more difficult for these fonts. In this tutorial I will not be altering _H_HelveticaNeueExtras (it was included as the default font to prevent errors in BytaFont). So before we get to the porting we need to break apart these collections to get to the fonts contained within.
Rend the TTC
First we will break _H_Helvetica. Extract the ttsdk.zip that you downloaded earlier to your C: drive, so that you have C:\ttsdk. Move H\_Helvetica.ttc to C:\ttsdk\TTC. Now we need to open up DOSBox and enter the following commands to mount the correct directory:
mount c c:\ttsdk c: cd TTC
Now we can break the TTC with the following command:
This should leave you with eight TrueType fonts in the TTC folder, FONT00.ttf — FONT07.ttf. Put these aside and repeat this stage to break _H_HelveticaNeue as well. Now we can get to the porting.
Perform the port
During the port, we will copy the glyphs form the custom font that we want to use into the default ttf. For the TrueType Collections that we just split into ttf files, we only want to edit the following:
- For _H_Helvetica edit FONT00.ttf and FONT01.ttf
- For _H_HelveticaNeue edit FONT00.ttf, FONT02.ttf, FONT04.ttf, FONT05.ttf, and FONT06.ttf
Open up FontLab Studio and open up the default font ttf (for example FONT00.ttf or LockClock.ttf). Then open up your custom font ttf (the one you want to port) as well. First we want to check the UPM of the default font, so in that window press Ctrl+Alt+f to open up the font info and then select Metrics and Dimensions from the left. The UPM size for LockClock.ttf is 1000, so now we need to go back to the custom font and do the same. If the UPM is different in the custom font then change it here so that they are the same, making sure to check Scale all glyphs according to UPM size change.
Now the UPM for both fonts is the same. Still in the custom font, press Ctrl+a to select all glyphs, followed by Ctrl+c to copy them. Now move to the default font and paste special using Ctrl+alt+v. This will create a dialogue box with some options. Check the following:
- Left sidebearing
- Right sidebearing
- Adv. width
- Left Kerning
- Right Kerning
- Ignore destination selection, map glyphs by name
Now your custom font glyphs should be appearing in your default ttf. Some fonts may need further tweaking — the pix Chicago port required many alterations to get the correct character size. I won’t go into this further here as it will vary with different fonts (and will often be unnecessary) but some changes made were scaling glyphs, changing spacing, and ascender/character heights.
You can now export your new ttf by pressing Ctrl+Alt+g. If your port wasn’t for the Helvetica TrueType Collections then you are done and can now use your font on your device (I’d recommend BytaFont for this). If not, we now need to combine the FONT00.ttf — FONT07.ttf files back into the ttc.
Forge the TTC
Put the FONT00.ttf — FONT07.ttf files (overwrite the default files with your ported fonts) back into C:\ttsdk\TTC. Input the following command into DOSBox:
MAKETTC _H_Helvetica.ttc FONT00.TTF FONT01.TTF FONT02.TTF FONT03.TTF FONT04.TTF FONT05.TTF FONT06.TTF FONT07.TTF
You will now have a shiny new ttc in C:\ttsdk\TTC, ready to use on your device. You can repeat this for _H_HelveticaNeue. As mentioned earlier, I’d recommend using BytaFont to apply your new font rather than overwriting the default. Good luck, and enjoy your porting!