-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcountry-geofont.html
115 lines (102 loc) · 6.07 KB
/
country-geofont.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<link href="http://gmpg.org/xfn/11" rel="profile">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Metadata -->
<meta name="description" content="">
<meta property="og:description" content="">
<meta property="og:title" content="Country Geofont" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://darrenwiens.github.io/country-geofont.html" />
<meta property="og:image" content="https://darrenwiens.github.io/images/face.png" />
<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>Darren Wiens</title>
<!-- CSS -->
<link href="//fonts.googleapis.com/" rel="dns-prefetch">
<link href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Abril+Fatface|PT+Sans:400,400italic,700&subset=latin,latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://darrenwiens.github.io/theme/css/poole.css" />
<link rel="stylesheet" href="https://darrenwiens.github.io/theme/css/hyde.css" />
<link rel="stylesheet" href="https://darrenwiens.github.io/theme/css/syntax.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/fork-awesome.min.css" crossorigin="anonymous">
<!-- Feeds -->
<!-- Analytics -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9664J8VT36"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-9664J8VT36');
</script>
<!-- Ads -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2681534008399266"
crossorigin="anonymous"></script>
</head>
<body class="theme-base-08">
<div class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<h1>
<a href="/">
<img class="profile-picture" src="https://darrenwiens.github.io/images/face.png">
Darren Wiens
</a>
</h1>
<p class="lead"></p>
<p class="lead"> </p>
<p></p>
</div>
<ul class="sidebar-nav">
</ul>
<nav class="sidebar-social">
<a class="sidebar-social-item" href="http://twitter.com/dkwiens" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="sidebar-social-item" href="https://fosstodon.org/@dkwiens" target="_blank">
<i class="fa fa-mastodon"></i>
</a>
<a class="sidebar-social-item" href="http://github.com/darrenwiens" target="_blank">
<i class="fa fa-github"></i>
</a>
<a style="display:none" class="sidebar-social-item" href="https://darrenwiens.github.io/None">
<i class="fa fa-rss"></i>
</a>
<a rel="me" style="display:none" href="https://fosstodon.org/@dkwiens">Mastodon</a>
</nav>
</div>
</div> <div class="content container">
<div class="post">
<h1 class="post-title">Country Geofont</h1>
<span class="post-date">Tue 10 May 2022</span>
<p>For no good reason, I started looking into fonts yesterday, and stumbled upon <a href="https://fontforge.org/en-US/">FontForge</a>. It's pretty neat, complete with a nice GUI for crafting character glyphs to your heart's content, <em>and</em> a <a href="https://fontforge.org/docs/scripting/python.html">Python scripting environment</a> which you can use to automate the process.</p>
<p>[Minimal research follows, so take my wording with a grain of salt] Each glyph is a set of <a href="https://fontforge.org/docs/scripting/python/fontforge.html#point">points</a> and splined <a href="https://fontforge.org/docs/scripting/python/fontforge.html#contour">contours</a>, which you can draw using a <a href="https://fontforge.org/docs/scripting/python/fontforge.html#glyph-pen">glyph pen</a>. As a geographically inclined person, my first instinct was to create a font in which each character glyph represents a geographic feature, in this case, countries.</p>
<p>I used <a href="https://www.naturalearthdata.com/downloads/110m-cultural-vectors/">Natural Earth 1:110M Admin 0 - Countries</a>. You can see the script I used <a href="https://gist.github.com/darrenwiens/5369c959a7e1976132cdcc2ad92fad05">here</a>.</p>
<p>There are instructions for Python scripting <a href="https://fontforge.org/docs/scripting/python.html">here</a>, however I could not work out how to actually install or interact with the Python module using those docs. I installed the GUI from <a href="https://fontforge.org/en-US/downloads/">here</a>, which may or may not install the Python bindings. I also installed the <a href="https://formulae.brew.sh/formula/fontforge">Homebrew formula</a>, which seems to enable the <code>fontforge</code> command.</p>
<p>My method for creating the font was:</p>
<ol>
<li>Install third party Python modules to the script directory (e.g. <code>pip install -t . shapely numpy</code>)</li>
<li>Write the <a href="https://gist.github.com/darrenwiens/5369c959a7e1976132cdcc2ad92fad05">script</a>.</li>
<li>Create a new, empty <code>sfd</code> font in the FontForge GUI.</li>
<li>Execute the script: <code>$ fontforge -script geo_font.py</code>.</li>
<li>Bask in the glory of the new font.</li>
</ol>
<p>I saved the <code>sfd</code> font to <code>ttc</code> within FontForge GUI and was able to install on my Mac. It behaves like any other font:
<img alt="geo font use" src="https://darrenwiens.github.io/images/countries_font.gif"></p>
<p>The entire font sheet looks like this:
<img alt="geo font sheet" src="https://darrenwiens.github.io/images/geo_font.png"></p>
<p>That's it! Get in touch with me on <a href="https://twitter.com/dkwiens">Twitter</a> if you want to talk more about geographic fonts!</p>
<span class="post-tags">
Tags:
<ul>
<li><a href="https://darrenwiens.github.io/tag/python.html">python</a></li>
<li><a href="https://darrenwiens.github.io/tag/font.html">font</a></li>
<li><a href="https://darrenwiens.github.io/tag/shapely.html">shapely</a></li>
</ul>
</span>
</div>
</div>
</body>
</html>