Custom fonts for unusual scripts.

The following is a simple method for building a font for an unusual script, using open source software. It could be used to design fonts for scripts that do not have a standard encoding (pre-Han Chinese scripts) or for distinctive varieties of scripts that do have a standard encoding (graph forms found in Chinese calligraphy). The example used here is the script of a 19th c. Nosu manuscript in the Penn Museum (96-17-2).

The method starts with a digital image of the text that provides the glyph exemplars. This needs to be converted to a black-and-white (i.e. 1-bit) image, in which the glyph exemplars are black and everything else white. The outlines of the black areas of the image can then be automatically traced, to provide the outlines for a digital font. These outlines can be imported into a font-editing program, to be modified as necessary, assigned to an encoding, and exported as a font file.

Tools

  1. Linux OS. The following walk-through was carried out on Ubuntu 12.04. All the tools below are simple to download and install under Ubuntu. It may be possible to adapt them to work on MS Windows or a Mac.
  2. GIMP, or some equivalent program for manipulating images.
  3. Glyphtracer, which automates the process of tracing glyph outlines (using potrace under the hood, which must be installed for Glyphtracer to work.)
  4. FontForge, a superb outline font editor.

Procedure

Since our goal here is illustrative, we will make a font consisting of just six glyphs, the six glyphs that appear in what I presume is a title in the top right-hand corner of this page. We will assign the glyphs to the same code points as lower case “a” through “f”. If text containing these six letters is displayed using the font, the glyphs will appear instead of these letters. (In general, this is not a good idea, but since it allows us to type our font using simple key-strokes, it is useful for illustrative purposes.)

1. Create B&W source image with GIMP.

96-17-2_6_croppedOpen up the image file in GIMP. We don’t need any of the Chinese text, so we can crop away everything except the top right-hand corner, giving something like the image on the right.

If we were doing this properly, we might want to compensate for the distortion due to the page not being flat when photographed. The GIMP’s “rotate”, “shear” and “scale” functions would probably be adequate for this. But we shan’t bother since the glyphs look good enough.

 

thresholdNow we need to convert this color image to a 1-bit black-and-white image. Use the GIMP’s “threshold” tool (tools > color tools > threshold on my machine) to separate the blackish ink of the glyphs from the various shades of brownish paper. The histogram in the threshold tool shows two peaks – one corresponds to the darker ink (smaller left peak) and the other to the lighter brown paper (larger right peak). By dragging the black slider to an appropriate position between the two peaks, we can make almost all of the paper white, and almost all of the ink black. The aim is to preserve the glyph outlines as accurately as possible. Any black mess that comes over from dark patches on the paper can be cleaned up in the next stage.

96-17-2_6Now we have a color image that only uses two colors (black and white). We need to convert it to a black and white (i.e. 1-bit) image. GIMP does this with Image > Mode > Indexed... > Use black and white (1-bit) palette. Now we can also use the usual GIMP tools to clean up any speckles or other mess that is interfering with the glyph outlines. This should give us something like the image on the left.

Save as a PNG file. We now have a image file that is acceptable as input to Glyphtracer.

 

2. Trace glyph outlines with Glyphtracer.

On running Glyphtracer, the first dialog screen allows you to choose the name for the font (anything will do – we’ll call ours nosu), and to select the file path for the input file (browse to that PNG file you saved in the previous step) and the output file (if you use the automatically generated path, it will end up in the same location as the input file).

glyphtracer1

Click Start.

The next screen should display the input image, with a bounding box around each glyph. The current glyph is indicated by the text in the button bar at the bottom: Glyph 1/26 a (a). If you click on any glyph in the image, its outline will be assigned to the code point for “a”. This also automatically increments the code point to “b”, reflected in the button bar text. Experiment with the three buttons at the lower left: these change the code point to which a clicked glyph will be assigned. As you assign each glyph in the image, it appears greyed out. (I haven’t found any way to unassign a code point.)

glyphtracer2

Code points available for assignment include Latin alphabet and its common extensions, numerals 1-10, common symbols, and Cyrillic. However, it is an easy task to modify the python code in the file gtlib.py to allow assignment to other ranges, such as CJK for Chinese, or the Private Use Areas.

When all glyphs have been assigned to code points, click Generate SFD file. Glyphtracer will automatically trace the outlines of the glyphs, representing them using Bézier curves. If your input file was nosu.png and you accepted the default options, the output file will be nosu.sfd and in the same directory. The SFD file format contains the numerical data representing the glyph outlines, and the mappings to code points. It is readable by the FontForge program which is the next tool we need to use.

3. Make font with FontForge.

Run FontForge. Open the SFD file saved in the previous step. The glyphs will appear in the appropriate positions.

fontforge1

Double click a glyph to edit its outline. (We won’t actually do any editing for the purposes of this walk-through, but the glyph edit window is shown below.)

fontforge2

Generate the font: File > Generate Fonts.... (I got the “missing points at extrema” and “non-integral coordinates” errors – but these are not lethal, so saved anyway. Alternatively, fix them in FontForge before saving.) The default is to save as a TrueType font, which will produce a file with a .ttf extension: nosu.ttf.

4. Install font, and try it out.

The font file that I produced is here: http://www.cangjie.info/blog/public_files/nosu.ttf

The font can be installed on any platform, including MS Windows, in the usual way. The screen shot below shows a document produced by typing “abcdef” etc. and then switching the font to nosu.ttf.

LibreOffice

Notes.

  • nosu.ttf is not a fixed-width font, as most East Asian fonts are expected to be. This could easily be changed using FontForge.
  • There are constraints on the arrangement of glyphs in the image to be read by Glyphtracer. I believe it is the case that individual glyphs must be separated by an orthogonal grid of whitespace. I.e. both horizontal and  vertical bands of white, running across the entire image, must separate rows and columns of black glyphs.
  • For a similar guide to the use of these tools, see James Wilkes Web Design. It also describes a technique for embedding fonts in web-pages, so content can be viewed without end users having to download and install the relevant fonts.
  • Youtube tutorial by the developer of Glyphtracer.

 

One thought on “Custom fonts for unusual scripts.

  1. Adnan

    I’m trying to generate a ttf font file from a historical font image file. If I select few glyphs in glyphtracer-1.3, the font is being generated successfully; however, when I click more than 10-12 glyphs, i get an error. I found that if you set Zoom level: 2, you get this error, otherwise, no error appears.

    May be useful for someone trying to use Glyphtracer-1.3 and get this error.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *