<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>gaurav's rants &#187; add</title>
	<atom:link href="http://blog.gauravgiri.com/tag/add/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.gauravgiri.com</link>
	<description>mostly iPhone stuff</description>
	<lastBuildDate>Wed, 21 Jul 2010 11:44:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>[Tutorial] Adding Extra Fonts to iPhone</title>
		<link>http://blog.gauravgiri.com/2008/08/tutorial-adding-extra-fonts-to-iphone/</link>
		<comments>http://blog.gauravgiri.com/2008/08/tutorial-adding-extra-fonts-to-iphone/#comments</comments>
		<pubDate>Sun, 31 Aug 2008 12:37:03 +0000</pubDate>
		<dc:creator>gaurav</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[2.0.x]]></category>
		<category><![CDATA[add]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[custom]]></category>
		<category><![CDATA[extra]]></category>
		<category><![CDATA[font]]></category>

		<guid isPermaLink="false">http://blog.gauravgiri.com/?p=363</guid>
		<description><![CDATA[continuing the posts about fonts.. here&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p>continuing the posts about fonts.. here&#8217;s how you can add extra fonts to your iPhone for use with WinterBoard and maybe other applications as well..</p>
<p>Advantages of adding extra fonts:</p>
<ul>
<li>Set your SpringBoard icon labels to the font of your choice [through WinterBoard]</li>
<li>Get extended font support for viewing websites in Safari</li>
<li>Get extended font support in applications, either as a user or a developer</li>
</ul>
<p>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</p>
<ul>
<li>Calibri</li>
<li>Calibri Italic</li>
<li>Calibri Bold</li>
<li>Calibri Bold Italic</li>
</ul>
<p>[i'm doing this on a Windows Vista system, if you're not using Vista some steps for obtaining the fonts may be different]<br />
<span id="more-363"></span><br />
<strong>Terms for this tutorial:</strong><br />
<strong>Font Family</strong> 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<br />
<strong>Font Name</strong> is the name given to a font eg. Calibri, Calibri Bold, Calibri Italic are fonts in the Calibri font family<br />
<strong>Font File Name</strong> is the filename for the font file. eg. Calibri.ttf, CalibriBold.ttf<br />
<strong>Note:</strong> changing the filename for a Font File <strong>*does not*</strong> change the Font Name for that file. i&#8217;ve seen many people tryin to get fonts to work by renaming the files. it simply won&#8217;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&#8217;s named Helvetica.ttf or Calibri.ttf</p>
<p><strong><big>Copy the fonts:</big></strong></p>
<ul>
<li>1. Start &gt; Run, or WinKey + R</li>
<li>2. Type <strong>fonts</strong> in the Run window that opens</li>
<li>3. Hit Enter</li>
<li>4. This will open the Fonts folder. <em>alternatively you can open it through My Computer C:/Windows/Fonts/ [where C:/ is your windows drive]</em></li>
<li>5. Make a new folder <strong>Calibri</strong> on your Desktop</li>
<li>6. Find the Calibri fonts in the Fonts folder and select and drag them to the Calibri folder, or use copy/paste.</li>
<li>7. The fonts will have these file names</li>
<ul>
<li>Calibri: calibri.ttf</li>
<li>Calibri Bold: calibrib.ttf</li>
<li>Calibri Italic: calibrii.ttf</li>
<li>Calibri Bold Italic: calibriz.ttf</li>
</ul>
<li>8. Rename the font files to these names</li>
<ul>
<li>Calibri: Calibri.ttf</li>
<li>Calibri Bold: CalibriBold.ttf</li>
<li>Calibri Italic: CalibriItalic.ttf</li>
<li>Calibri Bold Italic: CalibriBoldItalic.ttf</li>
</ul>
<p>I prefer not to have spaces in the filenames that i&#8217;m going to put on my iPhone.</ul>
<p><strong><big>Install fonts on iPhone</big></strong></p>
<ul>
<li>1. Connect to your iPhone using WinSCP or Fugu via it&#8217;s IP address. username: root, password: alpine</li>
<li>2. Navigate to this folder <strong>/System/Library/Fonts/Cache/</strong></li>
<li>3. Create a new folder <strong>MyFonts</strong> in the Cache folder</li>
<p>we&#8217;ll copy our new fonts in this folder so that they are easily identifiable and properly organized.</p>
<li>4. Copy the four files for Calibri font to the MyFonts folder</li>
<li>5. Navigate to the folder <strong>/System/Lobrary/Fonts/</strong></li>
<li>6. Copy the file <strong>CGFontCache.plist</strong> to your desktop and use this link to convert it to plain xml format. <a href="http://140.124.181.188/~khchung/cgi-bin/plutil.cgi">http://140.124.181.188/~khchung/cgi-bin/plutil.cgi</a></li>
<li>7. Open the converted CGFontCache.plist file with your favorite text editor.</li>
<li>8. There are two sections in this file you need to edit <strong>Names</strong> and <strong>TraitMappings</strong></li>
<ul>
<li><strong>Names</strong> is an array which has key value pairs of the Font Name and the Font file name.</li>
<p>it has the following syntax</li>
<pre>
&lt;key&gt;Font Name&lt;/key&gt;
&lt;string&gt;Full Path to Font File&lt;/string&gt;
</pre>
<p>in this section add these lines at the start</p>
<pre><strong>
&lt;key&gt;Calibri&lt;/key&gt;
&lt;string&gt;/System/Library/Fonts/Cache/MyFonts/Calibri.ttf&lt;/string&gt;
&lt;key&gt;Calibri Bold&lt;/key&gt;
&lt;string&gt;/System/Library/Fonts/Cache/MyFonts/CalibriBold.ttf&lt;/string&gt;
&lt;key&gt;Calibri Italic&lt;/key&gt;
&lt;string&gt;/System/Library/Fonts/Cache/MyFonts/CalibriItalic.ttf&lt;/string&gt;
&lt;key&gt;Calibri Bold Italic&lt;/key&gt;
&lt;string&gt;/System/Library/Fonts/Cache/MyFonts/CalibriBoldItalic.ttf&lt;/string&gt;
</strong></pre>
<li><strong>TraitMappings</strong> is an array which maps the various font styles to fonts of a font family.</li>
<p>it has the following syntax</li>
<pre>
&lt;key&gt;Font Family Name&lt;/key&gt;
&lt;dict&gt;
	&lt;key&gt;Plain&lt;/key&gt;
	&lt;string&gt;Font Name&lt;/string&gt;
	&lt;key&gt;Bold&lt;/key&gt;
	&lt;string&gt;Font Name&lt;/string&gt;
	&lt;key&gt;Italic&lt;/key&gt;
	&lt;string&gt;Font Name&lt;/string&gt;
	&lt;key&gt;Bold-Italic&lt;/key&gt;
	&lt;string&gt;Font Name&lt;/string&gt;
&lt;/dict&gt;
</pre>
<p><strong>Note:</strong> the four <key> elements are fixed, you can not use any other values for these, they must be <strong>Plain, Bold, Italic, Bold-Italic</strong>. The font name will vary from font to font. If you don&#8217;t have a particular font for a font family simply exclude the respective lines from it&#8217;s entry, ie if you only have Plain and Bold fonts use only the Plain and Bold &lt;key&gt;,&lt;string&gt; pairs and exclude the Italic and Bold-Italic pairs.</p>
<p>in this section add these lines at the start</p>
<pre><strong>
&lt;key&gt;Calibri&lt;/key&gt;
&lt;dict&gt;
	&lt;key&gt;Plain&lt;/key&gt;
	&lt;string&gt;Calibri&lt;/string&gt;
	&lt;key&gt;Bold&lt;/key&gt;
	&lt;string&gt;Calibri Bold&lt;/string&gt;
	&lt;key&gt;Italic&lt;/key&gt;
	&lt;string&gt;Calibri Italic&lt;/string&gt;
	&lt;key&gt;Bold-Italic&lt;/key&gt;
	&lt;string&gt;Calibri Bold Italic&lt;/string&gt;
&lt;/dict&gt;
</strong></pre>
</ul>
<li>9. Respring/Reboot your iPhone to load the new fonts and test them.</li>
<li><strong>10. Result</strong></li>
<p>the HTML page</p>
<pre>
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Calibri Test&lt;/title&gt;

	&lt;style&gt;
		#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;
		}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=calibri&gt;Calibri&lt;/div&gt;
&lt;div id=calibrib&gt;Calibri Bold&lt;/div&gt;
&lt;div id=calibrii&gt;Calibri Italic&lt;/div&gt;
&lt;div id=calibriib&gt;Calibri Bold Italic&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>is rendered like this in MobileSafari<br />
<strong>Before:</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/img_0095.png" rel="lightbox[363]"><img src="http://blog.gauravgiri.com/wp-content/uploads/img_0095.png" alt="" title="img_0095" width="320" height="480" class="alignnone size-full wp-image-393" /></a></p>
<p><strong>After:</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/img_0096.png" rel="lightbox[363]"><img src="http://blog.gauravgiri.com/wp-content/uploads/img_0096.png" alt="" title="img_0096" width="320" height="480" class="alignnone size-full wp-image-394" /></a>
</ul>
<p>i hope you find this tutorial useful&#8230;. <img src='http://blog.gauravgiri.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gauravgiri.com/2008/08/tutorial-adding-extra-fonts-to-iphone/feed/</wfw:commentRss>
		<slash:comments>30</slash:comments>
		</item>
	</channel>
</rss>
