gaurav’s rants

continuing the posts about fonts.. here’s how you can add extra fonts to your iPhone for use with WinterBoard and maybe other applications as well..

Advantages of adding extra fonts:

• Set your SpringBoard icon labels to the font of your choice [through WinterBoard]
• Get extended font support for viewing websites in Safari
• Get extended font support in applications, either as a user or a developer

For this tutorial I will add the Calibri font family to my iPhone, the following fonts of this family should be available on your computer by default

• Calibri
• Calibri Italic
• Calibri Bold
• Calibri Bold Italic

[i'm doing this on a Windows Vista system, if you're not using Vista some steps for obtaining the fonts may be different]

Terms for this tutorial:
Font Family is the font class, a font family may have many similar fonts, these fonts have different names and slightly different styles. eg Arial, Helvetica, Calibri are font families
Font Name is the name given to a font eg. Calibri, Calibri Bold, Calibri Italic are fonts in the Calibri font family
Font File Name is the filename for the font file. eg. Calibri.ttf, CalibriBold.ttf
Note: changing the filename for a Font File *does not* change the Font Name for that file. i’ve seen many people tryin to get fonts to work by renaming the files. it simply won’t work because no matter how many times you change the filename, the metadata contained in the file remains the same. a Helvetica font is a Helvetica font whether it’s named Helvetica.ttf or Calibri.ttf

Copy the fonts:

• 1. Start > Run, or WinKey + R
• 2. Type fonts in the Run window that opens
• 3. Hit Enter
• 4. This will open the Fonts folder. alternatively you can open it through My Computer C:/Windows/Fonts/ [where C:/ is your windows drive]
• 5. Make a new folder Calibri on your Desktop
• 6. Find the Calibri fonts in the Fonts folder and select and drag them to the Calibri folder, or use copy/paste.
• 7. The fonts will have these file names
• Calibri: calibri.ttf
• Calibri Bold: calibrib.ttf
• Calibri Italic: calibrii.ttf
• Calibri Bold Italic: calibriz.ttf
• 8. Rename the font files to these names
• Calibri: Calibri.ttf
• Calibri Bold: CalibriBold.ttf
• Calibri Italic: CalibriItalic.ttf
• Calibri Bold Italic: CalibriBoldItalic.ttf

I prefer not to have spaces in the filenames that i’m going to put on my iPhone.

Install fonts on iPhone

• 1. Connect to your iPhone using WinSCP or Fugu via it’s IP address. username: root, password: alpine
• 2. Navigate to this folder /System/Library/Fonts/Cache/
• 3. Create a new folder MyFonts in the Cache folder

we’ll copy our new fonts in this folder so that they are easily identifiable and properly organized.

• 4. Copy the four files for Calibri font to the MyFonts folder
• 5. Navigate to the folder /System/Lobrary/Fonts/
• 6. Copy the file CGFontCache.plist to your desktop and use this link to convert it to plain xml format. http://140.124.181.188/~khchung/cgi-bin/plutil.cgi
• 7. Open the converted CGFontCache.plist file with your favorite text editor.
• 8. There are two sections in this file you need to edit Names and TraitMappings
• Names is an array which has key value pairs of the Font Name and the Font file name.

it has the following syntax

<key>Font Name</key>
<string>Full Path to Font File</string>

in this section add these lines at the start

<key>Calibri</key>
<string>/System/Library/Fonts/Cache/MyFonts/Calibri.ttf</string>
<key>Calibri Bold</key>
<string>/System/Library/Fonts/Cache/MyFonts/CalibriBold.ttf</string>
<key>Calibri Italic</key>
<string>/System/Library/Fonts/Cache/MyFonts/CalibriItalic.ttf</string>
<key>Calibri Bold Italic</key>
<string>/System/Library/Fonts/Cache/MyFonts/CalibriBoldItalic.ttf</string>

• TraitMappings is an array which maps the various font styles to fonts of a font family.

it has the following syntax

<key>Font Family Name</key>
<dict>
	<key>Plain</key>
	<string>Font Name</string>
	<key>Bold</key>
	<string>Font Name</string>
	<key>Italic</key>
	<string>Font Name</string>
	<key>Bold-Italic</key>
	<string>Font Name</string>
</dict>

Note: the four elements are fixed, you can not use any other values for these, they must be Plain, Bold, Italic, Bold-Italic. The font name will vary from font to font. If you don’t have a particular font for a font family simply exclude the respective lines from it’s entry, ie if you only have Plain and Bold fonts use only the Plain and Bold <key>,<string> pairs and exclude the Italic and Bold-Italic pairs.

in this section add these lines at the start

<key>Calibri</key>
<dict>
	<key>Plain</key>
	<string>Calibri</string>
	<key>Bold</key>
	<string>Calibri Bold</string>
	<key>Italic</key>
	<string>Calibri Italic</string>
	<key>Bold-Italic</key>
	<string>Calibri Bold Italic</string>
</dict>

• 9. Respring/Reboot your iPhone to load the new fonts and test them.
• 10. Result

the HTML page

<html>
<head>
	<title>Calibri Test</title>
	
	<style>
		#calibri	{
			font-family: calibri;
			font-style: normal;
		}
		#calibrii	{
			font-family: calibri;
			font-style: italic;
		}
		#calibrib	{
			font-family: calibri;
			font-weight: bold;
		}
		#calibriib	{
			font-family: calibri;
			font-style: italic;
			font-weight: bold;
		}
	</style>
</head>
<body>
<div id=calibri>Calibri</div>
<div id=calibrib>Calibri Bold</div>
<div id=calibrii>Calibri Italic</div>
<div id=calibriib>Calibri Bold Italic</div>
</body>
</html>

is rendered like this in MobileSafari
Before:


After:

i hope you find this tutorial useful….

Be Sociable, Share!

•