<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="/assets/atom.xsl" type="text/xsl"?><feed
	xmlns="http://www.w3.org/2005/Atom"
	xmlns:thr="http://purl.org/syndication/thread/1.0"
	xml:lang="en-US"
	><title>Sacha Chua - tag - fonts</title>
	<subtitle>Emacs, sketches, and life</subtitle>
	<link rel="self" type="application/atom+xml" href="https://sachachua.com/blog/tag/fonts/feed/atom/index.xml" />
  <link rel="alternate" type="text/html" href="https://sachachua.com/blog/tag/fonts" />
  <id>https://sachachua.com/blog/tag/fonts/feed/atom/index.xml</id>
  <generator uri="https://11ty.dev">11ty</generator>
	<updated>2020-06-05T04:20:00Z</updated>
<entry>
		<title type="html">Python+FontForge+Org: I made a font based on my handwriting!</title>
		<link rel="alternate" type="text/html" href="https://sachachua.com/blog/2020/06/pythonfontforgeorg-i-made-a-font-based-on-my-handwriting/"/>
		<author><name><![CDATA[Sacha Chua]]></name></author>
		<updated>2020-06-05T08:29:25Z</updated>
    <published>2020-06-05T04:20:00Z</published>
    <category term="emacs" />
<category term="geek" />
<category term="org" />
		<id>https://sachachua.com/blog/?p=29568</id>
		<content type="html"><![CDATA[
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<p>I wanted to make a font based on my handwriting using only free software. It turns out that FontForge can be scripted with Python. I know just a little about Python and even less about typography, but I managed to hack together something that worked for me. If you're reading this on my blog at <a href="https://sachachua.com/blog/">https://sachachua.com/blog/</a> , you'll probably see the new font being used on the blog post titles. Whee!</p>
<p><a href="https://sachachua.com/blog/wp-content/uploads/2020/06/Screenshot_2020-06-04_23-49-38.png"><img loading="lazy" class="alignnone size-thumbnail wp-image-29569" src="https://sachachua.com/blog/wp-content/uploads/2020/06/Screenshot_2020-06-04_23-49-38-280x52.png" alt="" width="280" height="52" srcset="https://sachachua.com/blog/wp-content/uploads/2020/06/Screenshot_2020-06-04_23-49-38-280x52.png 280w, https://sachachua.com/blog/wp-content/uploads/2020/06/Screenshot_2020-06-04_23-49-38.png 635w" sizes="(max-width: 280px) 100vw, 280px"></a></p>
<p>My rough notes are at <a href="https://github.com/sachac/sachac-hand/">https://github.com/sachac/sachac-hand/</a>&nbsp;. I wanted to write it as a literate program using Org Babel blocks. It's not really fully reproducible yet, but it might be a handy starting point. The basic workflow was:</p>
<ol class="org-ol">
<li>Generate a template using other fonts as the base.</li>
<li>Import the template into Medibang Paint on my phone and draw letters on a different layer. (I almost forgot the letter <code>q</code>, so I had to add it at the last minute.)</li>
<li>Export just the layer with my writing.</li>
<li>Cut the image into separate glyphs using Python and autotrace each one.</li>
<li>Import each glyph into FontForge as an SVG and a PNG.</li>
<li>Set the left side and right side bearing, overriding as needed based on a table.</li>
<li>Figure out kerning classes.</li>
<li>Hand-tweak the contours and kerning.</li>
<li>Use <code>sfnt2woff</code> to export the web font file for use on my blog, and modify the stylesheet to include it.</li>
</ol>
<p>I really liked being able to specify kerning classes through an Org Mode table like this:</p>
<table border="2" frame="hsides" rules="groups" cellspacing="0" cellpadding="6"><colgroup> <col class="org-left"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> <col class="org-right"> </colgroup>
<tbody>
<tr>
<td class="org-left">&nbsp;</td>
<td class="org-right">None</td>
<td class="org-right">o,a,c,e,d,g,q,w</td>
<td class="org-right">f,t,x,v,y,z</td>
<td class="org-right">h,b,l,i,k</td>
<td class="org-right">j</td>
<td class="org-right">m,n,p,r,u</td>
<td class="org-right">s</td>
<td class="org-right">T</td>
<td class="org-right">zero</td>
</tr>
<tr>
<td class="org-left">None</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
</tr>
<tr>
<td class="org-left">f</td>
<td class="org-right">0</td>
<td class="org-right">-102</td>
<td class="org-right">-61</td>
<td class="org-right">-30</td>
<td class="org-right">0</td>
<td class="org-right">-60</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">-70</td>
</tr>
<tr>
<td class="org-left">t</td>
<td class="org-right">0</td>
<td class="org-right">-70</td>
<td class="org-right">-41</td>
<td class="org-right">-25</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">-10</td>
</tr>
<tr>
<td class="org-left">r</td>
<td class="org-right">0</td>
<td class="org-right">-82</td>
<td class="org-right">-41</td>
<td class="org-right">-25</td>
<td class="org-right">0</td>
<td class="org-right">-20</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">29</td>
</tr>
<tr>
<td class="org-left">k</td>
<td class="org-right">0</td>
<td class="org-right">-50</td>
<td class="org-right">-81</td>
<td class="org-right">-20</td>
<td class="org-right">0</td>
<td class="org-right">-20</td>
<td class="org-right">-48</td>
<td class="org-right">-120</td>
<td class="org-right">-79</td>
</tr>
<tr>
<td class="org-left">l</td>
<td class="org-right">0</td>
<td class="org-right">-41</td>
<td class="org-right">-50</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">-52</td>
</tr>
<tr>
<td class="org-left">v</td>
<td class="org-right">0</td>
<td class="org-right">-40</td>
<td class="org-right">-35</td>
<td class="org-right">-30</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">30</td>
</tr>
<tr>
<td class="org-left">b,o,p</td>
<td class="org-right">0</td>
<td class="org-right">-20</td>
<td class="org-right">-80</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">43</td>
</tr>
<tr>
<td class="org-left">a</td>
<td class="org-right">0</td>
<td class="org-right">-23</td>
<td class="org-right">-60</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">7</td>
</tr>
<tr>
<td class="org-left">W</td>
<td class="org-right">0</td>
<td class="org-right">-40</td>
<td class="org-right">-30</td>
<td class="org-right">-20</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-120</td>
<td class="org-right">17</td>
</tr>
<tr>
<td class="org-left">T</td>
<td class="org-right">0</td>
<td class="org-right">-190</td>
<td class="org-right">-120</td>
<td class="org-right">-60</td>
<td class="org-right">0</td>
<td class="org-right">-130</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-188</td>
</tr>
<tr>
<td class="org-left">F</td>
<td class="org-right">0</td>
<td class="org-right">-100</td>
<td class="org-right">-90</td>
<td class="org-right">-60</td>
<td class="org-right">0</td>
<td class="org-right">-70</td>
<td class="org-right">-100</td>
<td class="org-right">-40</td>
<td class="org-right">-166</td>
</tr>
<tr>
<td class="org-left">two</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">0</td>
<td class="org-right">-53</td>
</tr>
</tbody>
</table>
<p>I had a hard time defining classes using the FontForge interface because I occasionally ended up clearing my glyph selection, so it was great being able to just edit my columns and rows.</p>
<p>Clearly my kerning is still very rough–no actual values for j, for example–but it's a start. Also, I can probably figure out how to combine this with character pair kerning and have two tables for easier tweaking.</p>
<p>A- insisted on tracing my handwriting template a few times, so I might actually be able to go through the same process to convert her handwriting into a font. Whee!</p>
</div></div>
]]></content>
		</entry>
</feed>