[Tutorial] Adding Extra Fonts to iPhone

by gaurav on Aug.31, 2008, under iPhone

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….

Share and Enjoy:

:2.0.x, add, apple, custom, extra, font, iPhone

23 comments for this entry:

guest
August 31st, 2008 on 10:37 pm
Thanks for writing this. It appears that I followed these steps exactly before all the way up until step 9. I forgot to reboot. Anyways, thanks again
meerz
September 10th, 2008 on 6:35 am
any ideas on how to add a language to the iphone ?
Com3
September 10th, 2008 on 11:05 am
I second that, is it possible to add a second language to the phone, the phone can read the characters of that language with ease, Arabic that is, however the letters are separated, any way where we can attach those letters? and maybe add a keyboard layout?

Thanks
Hung Luu
September 22nd, 2008 on 4:42 pm
Gaurav, have u try to theme the font with Winterboard ? I tried to theme it but no luck at all
gaurav
September 23rd, 2008 on 11:05 pm
@Hung: yes i tried it too.. apparently WinterBoard doesn’t have this functionality yet. maybe it’s not possible to implement it with WinterBoard. i’ve made a simple [very simple] script that i use to swap fonts on my iPhone though.. will post it soon.
Hung Luu
September 25th, 2008 on 9:35 pm
I now can theme it with winterboard. But there’s 1 thing. Wb does not theme the whole system, it just theme the springboard font. Dont know is it because of the font or what other reason causes this. I remembered I read somewhere that if u want the whole UI font, u have to add sth to the font like when u port it . But i’m still figuring it out
gaurav
September 25th, 2008 on 10:04 pm
@Hung: WB has the feature to theme the icon labels since long, besides a few other text items like the clock, however it does not make system wide changes as it is not practical to create hooks into all the applications.
a font has to be ported to iPhone for use a tutorial for which can be found in this post..
http://blog.gauravgiri.com/2008/08/tutorial-port-fonts-to-iphone/
rahul
November 14th, 2008 on 8:18 am
is this link still active? http://140.124.181.188/~khchung/cgi-bin/plutil.cgi
yasser
January 1st, 2009 on 8:27 pm
@guarav Thanks, but I have a problem, i followed the steps but instead of Calibri i’m trying to add Tahoma, its not working Safari keeps on crashing if im viewing a site with tahoma font.
One thing I did which you didn’t mention is, I converted the xml file back to binary .plist and then sshd it to fonts folder is this right?
@rahul I used this link, https://brokolice.drsny.net/iphone/plutil/ to convert my .plist
Liza
April 24th, 2009 on 4:33 pm
My friend on Orkut shared this link with me and I’m not dissapointed that I came here.
Cin Do
May 4th, 2009 on 6:26 am
How about Apple iPod TOUCH 8GB WiFi Video 2nd Generation GRADE A?
Sonspesse
June 20th, 2009 on 2:07 pm
Хм,несогласен с предыдущими ораторами
) Bye
Wolf Paul
July 5th, 2009 on 11:18 pm
Hello,
I followed your instructions with the free Windows TTF font “Calligraph421BT.ttf” but it is not recognized as a font file on my iPhone 3G with OS 3.0. (The .plist file seems to be o.k. because the iPhone knows the font is there — just doesn’t display the glyphs)

Conversely, when I copy a TTF file from the iPhone to my Windows Fonts directory, it is not recognized as a font file by Windows.

Can you explain what the format differences are between iPhone and Windows TrueType fonts?

Wolf
FontInstaller
August 1st, 2009 on 3:39 am
I tried the tutorial the exact same way, then I tried in many different ways, but nothing works.
rudeboy
August 18th, 2009 on 2:14 am
oi,

as soon as i put an un-compiled CGFontCache.plist on my iPhone 3g my keyboard stops working in every app that needs the keyboard, anybody know why ?

(webmaster@everythingberry.net)
tks, rb.
Kramer
September 29th, 2009 on 3:34 pm
Sweet tutorial!

Thanks a lot.
flying sheep
October 9th, 2009 on 5:41 am
use this for plist conversion:
http://iappcat.com/plist/bin2xml

all other links are dead ;(
poor ones…
ram
October 20th, 2009 on 5:19 pm
thanx dude, it is really working, thank you very much.
TeluguFont
November 7th, 2009 on 5:13 am
Can we add support for a new language like Telugu using Gautami fonts that come with Windows XP?
If you could comment on this that would be great.
{Important|Valuable} {gift|info} for {anybody|anyone} who {needs|wants} {one way backlinks|backlinks} for no {charge|cost}. {Anyone|Anybody} {need|want} free {one way backlinks|backlinks} for their {blog|webite}? I {thought|figured} I {might|would} {share
December 2nd, 2009 on 8:07 pm
Valuable gift for anyone who needs one way backlinks for no charge. Anybody want free backlinks for their webite? I figured I would share some good information I discovered a little while ago. Free one way backlinks for your website. I have been using this for my websites and it absolutely works great! Click my name to get what I mean. Not peddling a thing, it’s completely free of charge and it works.
Sameer
December 21st, 2009 on 11:36 am
can we use de nagri font
Shashidhar
January 11th, 2010 on 7:43 am
Hi Gaurav,
I’ve iphone 3gs 32GB factory unlocked with latest firmware & baseband, jailbroken with blackrain. I’m using PDF reader, Goodreader & Quickoffice to read word & pdf documents. Many of pdf files are in Kannada fonts and when i open these files it will not display the original alphabets of Kannada. Is it possible to install Kannada fonts in my iphone so that I can read my pdf files correctly. Thanx in advance.
shashi
Internet Banking
February 4th, 2010 on 12:32 pm
@Markus I get your drift on where you were going there. I often think of my past and use it as a means to analyze where I am and where I want to get to. Where I struggel is balancing it all out. How do you guys balance things out?