<?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; how</title>
	<atom:link href="http://blog.gauravgiri.com/tag/how/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] Port Fonts to iPhone</title>
		<link>http://blog.gauravgiri.com/2008/08/tutorial-port-fonts-to-iphone/</link>
		<comments>http://blog.gauravgiri.com/2008/08/tutorial-port-fonts-to-iphone/#comments</comments>
		<pubDate>Sat, 30 Aug 2008 17:10:39 +0000</pubDate>
		<dc:creator>gaurav</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[2.0.x]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[custom]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[how]]></category>
		<category><![CDATA[port]]></category>
		<category><![CDATA[to]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://blog.gauravgiri.com/?p=302</guid>
		<description><![CDATA[i finally took the time to write the much awaited tutorial describing the process of porting fonts for iPhone.. this is important as iPhone users have many requests for fonts of their choice and as much as i&#8217;d like to, i simply don&#8217;t have the time to fulfill all these demands.. to cut a long [...]]]></description>
			<content:encoded><![CDATA[<p>i finally took the time to write the much awaited tutorial describing the process of porting fonts for iPhone.. this is important as iPhone users have many requests for fonts of their choice and as much as i&#8217;d like to, i simply don&#8217;t have the time to fulfill all these demands..<br />
to cut a long story short..<br />
<em>&#8220;Give a man a fish, he&#8217;ll eat for a day, teach a man to fish and he&#8217;ll eat for a lifetime.&#8221;</em><br />
haha.. <img src='http://blog.gauravgiri.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><strong>Terms for this tutorial:</strong><br />
<strong>default font</strong> is the unmodified font that is present on your iPhone<br />
<strong>custom font</strong> is the font that you are going to port for your iPhone<br />
<strong>ported font</strong> is the result of the process that will be placed on your iPhone<br />
<span id="more-302"></span><br />
Let&#8217;s see what all we need to begin with the process.. Check list:</p>
<ul>
<li><strong>1. The font you want to port.</strong></li>
<p>If you&#8217;re porting the Myriad font to the System [Helvetica] font, make sure you have the files [TTF or PFB/PFM or other] for both the Myriad Regular font and the Myriad Bold font.. if you don&#8217;t have the bold font file, you can convert the Regular font to the Bold font with FontLab Studio [using the Transformations panel] but the conversion might not be perfect.</p>
<li><strong>2. The font you want to replace on the iPhone.</strong></li>
<p>You will need the default font for some important information like metadata and some glyphs that the custom font may not have. Make a new folder on your desktop <em>&#8220;Custom Fonts&#8221;</em> for your custom font work and keep the original default fonts in that folder. Keep the custom fonts in folders with their names under this folder, you can export the ported font to the corresponding folder as well.. [this is the convention i follow, you are free to think of something better]<br />
You can copy the default fonts from this folder on your iPhone <strong>/System/Library/Fonts/Cache/</strong></p>
<li><strong>3. FontLab Studio</strong></li>
<p><a href="http://www.fontlab.com/font-editor/fontlab-studio/">http://www.fontlab.com/font-editor/fontlab-studio/</a><br />
You need the <em>full registered</em> version of FontLab Studio. The demo version will generate only 20 glyphs in a font. FontLab Studio costs $649, although there are a few alternative means of obtaining the software which i will not discuss here [Google is your friend, so are <em>Demonoid</em> and <em>ThePirateBay</em>]..<br />
[you might want to keep FontCreator as a backup software. i tried to open Calibri font with FontLab Studio and it crashed everytime i tried.. FontCreator is not as feature rich but you can export the font and then use it in FontLab Studio.]</p>
<li><strong>4. The desire to change things..</strong></li>
</ul>
<p>First let&#8217;s take a look at the metadata of default fonts that may be replaced, these are the ones that are usually replaced, though all of them can be easily replaced..<br />
<strong>Helvetica.ttf</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/helvetica.png" rel="lightbox[302]"><img src="http://blog.gauravgiri.com/wp-content/uploads/helvetica.png" alt="" title="helvetica" width="500" height="286" class="alignnone size-full wp-image-307" /></a><br />
<strong>HelveticaBold.ttf</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/helveticabold.png" rel="lightbox[302]"><img class="alignnone size-full wp-image-308" title="helveticabold" src="http://blog.gauravgiri.com/wp-content/uploads/helveticabold.png" alt="" width="500" height="286" /></a><br />
<strong>LockClock.ttf</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/lockclock.png" rel="lightbox[302]"><img class="alignnone size-full wp-image-309" title="lockclock" src="http://blog.gauravgiri.com/wp-content/uploads/lockclock.png" alt="" width="500" height="286" /></a><br />
<strong>MarkerFeltThin.ttf</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/markerfeltthin.png" rel="lightbox[302]"><img class="alignnone size-full wp-image-310" title="markerfeltthin" src="http://blog.gauravgiri.com/wp-content/uploads/markerfeltthin.png" alt="" width="500" height="286" /></a></p>
<p>The screenshots show the metadata that is embedded in the fonts. If you replace a default font with a custom font with incorrect metadata, the iPhone OS will load the font but it will not find the data it is looking for and the application will most likely crash. Incorrect metadata in MarkerFeltThin.ttf will cause MobileNotes to crash, incorrect data in LockClock.ttf will cause SWOD, incorrect metadata in Helvetica.ttf or HelveticaBold.ttf will cause SpringBoard to crash.<br />
So if you make any custom font to replace the default fonts, you must take care to maintain the correct metadata. It is therefore a good idea to start with the default font and to copy glyphs from the custom font over glyphs of the default font, this way you also maintain any extra glyphs the default font has that the custom font doesn&#8217;t, so it makes the font more complete.</p>
<p><strong>NOTE:</strong> If you&#8217;re porting a system font, it is *absolutely essential* that you copy the glyphs from custom font over the default font. Helvetica and HelvetivaBold have around 2135 glyphs, a huge majority of which will not be present in the custom font you&#8217;re going to port. Missing glyphs in system font will totally ruin the purpose of porting it.</p>
<p><strong><big>Important things to do before the actual port:</big></strong></p>
<ul>
<li><strong>1. Change Metrics and Dimensions of the default fonts.</strong></li>
<p>iPhone default fonts have a UPM size of 2048, which makes working with Metrics &amp; Dimensions a bit of a hassle, setting this value to 1000 makes life simpler. We will also edit some other Metrics &amp; Dimensions here. Set values as shown in the screenshots.<br />
<strong><em>alternatively you can download the default fonts i&#8217;ve attached here and use them as templates. they have all the required settings and glyphs. setting vary for the system fonts, notes font and lock clock font. so it&#8217;s better to use the templates..</em></strong><br />
<strong><big>Download: <a class="downloadlink" href="http://blog.gauravgiri.com/wp-content/plugins/download-monitor/download.php?id=22" title=" downloaded 1982 times" >Font Templates for Port (1982)</a></big></strong></p>
<p>Steps:<br />
a. Open the default font with FontLab Studio.<br />
b. File &gt; Font Info<br />
c. Metrics &amp; Dimensions<br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/metricsdimensions.png" rel="lightbox[302]"><img class="alignnone size-full wp-image-315" title="metricsdimensions" src="http://blog.gauravgiri.com/wp-content/uploads/metricsdimensions.png" alt="" width="500" height="286" /></a><br />
Make sure the checkbox for &#8220;Scale all glyphs according to UPM size change&#8221; is checked.<br />
d. Metrics &amp; Dimensions &gt; Key Dimensions<br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/keydimensions.png" rel="lightbox[302]"><img class="alignnone size-full wp-image-320" title="keydimensions" src="http://blog.gauravgiri.com/wp-content/uploads/keydimensions.png" alt="" width="500" height="286" /></a><br />
e. Metrics &amp; Dimensions &gt; TrueType-specific metrics<br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/ttspecificmetrics.png" rel="lightbox[302]"><img class="alignnone size-full wp-image-322" title="ttspecificmetrics" src="http://blog.gauravgiri.com/wp-content/uploads/ttspecificmetrics.png" alt="" width="500" height="286" /></a><br />
f. Metrics &amp; Dimensions &gt; Subscript and Superscript<br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/subsup.png" rel="lightbox[302]"><img class="alignnone size-full wp-image-321" title="subsup" src="http://blog.gauravgiri.com/wp-content/uploads/subsup.png" alt="" width="500" height="286" /></a></p>
<p>g. For Helvetica.ttf and HelveticaBold.ttf make sure the glyph <strong>uni25CF</strong> [black circle] is present in the font. otherwise the password field will show up empty on the iPhone. you can get this glyph from fonts on your system. see here: <a href="http://www.fileformat.info/info/unicode/char/25cf/fontsupport.htm" target="blank">http://www.fileformat.info/info/unicode/char/25cf/fontsupport.htm</a></p>
<p>h. File &gt; Generate Font<br />
i. Overwrite the default font that you opened for editing. Otherwise use a label in your filenames for default fonts that you&#8217;ve modified, so that they&#8217;re easy to recognize. We will work only with these modified fonts.<br />
<strong><big>Download: <a class="downloadlink" href="http://blog.gauravgiri.com/wp-content/plugins/download-monitor/download.php?id=22" title=" downloaded 1982 times" >Font Templates for Port (1982)</a></big></strong></p>
<li><strong>2. Make sure you have a proper folder structure to handle the default fonts and custom fonts. This is important because very soon you&#8217;ll have dozens of fonts with the same name.</strong></li>
</ul>
<p><strong><big>The port process:</big></strong></p>
<ul>
<li><strong>1. Open both the default font and the custom font in FontLab Studio.</strong></li>
<p>Arrange font windows by <strong>Window &gt; Tile Horizontally</strong>.<br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/fls01.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-331" title="fls01" src="http://blog.gauravgiri.com/wp-content/uploads/fls01-300x240.png" alt="" width="300" height="240" /></a></p>
<li><strong>2. Change the UPM size of custom font to 1000.</strong></li>
<p>Glyphs can only be copied between fonts having the same UPM size.<br />
Open Font Info window <strong>File &gt; Font Info</strong>.<br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/fls02.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-332" title="fls02" src="http://blog.gauravgiri.com/wp-content/uploads/fls02-300x171.png" alt="" width="300" height="171" /></a></p>
<li><strong>3. Select all glyphs of custom font.</strong></li>
<p><a href="http://blog.gauravgiri.com/wp-content/uploads/fls03.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-333" title="fls03" src="http://blog.gauravgiri.com/wp-content/uploads/fls03-300x240.png" alt="" width="300" height="240" /></a></p>
<li><strong>4. Copy selected glyphs.</strong></li>
<p><a href="http://blog.gauravgiri.com/wp-content/uploads/fls04.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-334" title="fls04" src="http://blog.gauravgiri.com/wp-content/uploads/fls04-300x240.png" alt="" width="300" height="240" /></a><br />
Notice that i have deselected the <strong>.notdef</strong> glyph of custom font as it is blank. We will not copy this blank glyph so that we retain the glyph in the default font.</p>
<li><strong>5. Select the default font window and paste glyphs.</strong></li>
<p>Click once in the default font window and paste the copied glyphs using <strong>Edit &gt; Paste Special</strong>.<br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/fls05.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-335" title="fls05" src="http://blog.gauravgiri.com/wp-content/uploads/fls05-300x240.png" alt="" width="300" height="240" /></a></p>
<li><strong>6. Select layers for Paste Special.</strong>
<ul>
<li><strong>a. Outline</strong></li>
<li><strong>b. Left sidebearing</strong></li>
<li><strong>c. Right sidebearing</strong></li>
<li><strong>d. Adv. width</strong></li>
<li><strong>e. Left Kerning</strong></li>
<li><strong>f. Right Kerning</strong></li>
<li><strong>g. Ignore destination selection, map glyphs by name</strong></li>
</ul>
</li>
<p>This is the main step that you need to take care of, these setting have to exactly as shown in the screenshot or you&#8217;ll mess up the default font and have to start over again.<br />
These checkboxes must be checked:<br />
<strong></strong></p>
<p><strong>All other checkboxes must be unchecked.<br />
</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/fls06.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-336" title="fls06" src="http://blog.gauravgiri.com/wp-content/uploads/fls06-300x240.png" alt="" width="300" height="240" /></a></p>
<p><strong>Result:</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/fls07.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-337" title="fls07" src="http://blog.gauravgiri.com/wp-content/uploads/fls07-300x240.png" alt="" width="300" height="240" /></a></p>
<p>if it&#8217;s the system font you&#8217;re porting and you&#8217;re not using the template i&#8217;ve attached here, make sure you copy the glyph <strong>uni25CF</strong> to the font [using the same paste special settings as above] before going any further.</p>
<li><strong>7. Generate the font.</strong></li>
<p>We&#8217;ve finished copying the glyphs. Check once for any errors or glitches in the font that you may easily notice by just scanning the glyphs once..<br />
Once certain that the glyphs are okay we can generate the font by <strong>File &gt; Generate Font</strong><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/fls08.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-338" title="fls08" src="http://blog.gauravgiri.com/wp-content/uploads/fls08-300x240.png" alt="" width="300" height="240" /></a></p>
<li><strong>8. Save the ported font.</strong></li>
<p><a href="http://blog.gauravgiri.com/wp-content/uploads/fls09.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-339" title="fls09" src="http://blog.gauravgiri.com/wp-content/uploads/fls09-300x240.png" alt="" width="300" height="240" /></a><br />
<a href="http://blog.gauravgiri.com/wp-content/uploads/fls10.png" rel="lightbox[302]"><img class="alignnone size-medium wp-image-340" title="fls10" src="http://blog.gauravgiri.com/wp-content/uploads/fls10-300x240.png" alt="" width="300" height="240" /></a></p>
<li><strong>Done.</strong> <img src='http://blog.gauravgiri.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </li>
</ul>
<p>Simply copy the ported font to the fonts folder [<strong>/System/Library/Fonts/Cache/</strong>] on your iPhone and reboot once for it to take effect.. make sure you keep backup of original fonts in case something goes wrong..</p>
<p><strong><big>Download: <a class="downloadlink" href="http://blog.gauravgiri.com/wp-content/plugins/download-monitor/download.php?id=22" title=" downloaded 1982 times" >Font Templates for Port (1982)</a></big></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.gauravgiri.com/2008/08/tutorial-port-fonts-to-iphone/feed/</wfw:commentRss>
		<slash:comments>35</slash:comments>
		</item>
	</channel>
</rss>
