Font Editing

Problematic: For some iOS application that I worked on, I had to use specific fonts and I encountered 2 issues doing so:

- The vertical offset can be too high or too low and the text is misaligned

- For a specific case I have to replace a specific glyph with another

 I looked for different mac software to edit fonts and achieve this and I did not find one that was able to edit and save the font in it's original format for a reasonable price. 

During my researches I found Apple Font Tool Suite a command line tool that can do that by extracting the font infos into an XML file. Then it's possible to edit these properties into the XML file and reintegrate this back into the font.

A font contains different tables representing glyphs, metrics, character mapping, ligature, kerning... The list of all tables is available here.

The command that is used to extract/fuse infos is called ftxdumperfuser, here is the parameters that we will use:

     - '-t' (--table) Followed by the four character tag for the table to dump or fuse

     - '-A d' to dump the table into an XML file

     - '-A f' to fuse the XML data into the font

1. Replace glyph into a font

I'm working with the font Futura.ttc which contains 4 variants:

     - Condensed ExtraBold

     - Condensed Medium

     - Medium Italic

     - Medium

In this case you will got an XML output for each variants.

What I will do here, is replace the lowercase glyphs with the uppercase glyphs. (We have an app that share the same code base for different clients, and one of our clients asked us for a version with the Futura font that use uppercase everywhere in the app). 

To achieve this we will replace the glyph data and update the metric (the new glyph can take more or less space).

 These 3 screenshots are showing: 

     - The original font in lowercase

     - The modified font just be replacing lowercase glyphs with uppercase glyphs

     - The modified font after adjusting the metrics

There is 2 tables to access to get these infos:

     - 'glyf'  The glyph outline table

     - 'hmtx' The horizontal metric table

 

// to extract from the font
ftxdumperfuser -t glyf -p -G -A d Futura.ttc
ftxdumperfuser -t hmtx -p -G -A d Futura.ttc

I made a copy of the font and renamed it to FuturaUppercase.ttc and got this after the extract:

You can find the glyph data and replace them this the data you want, here is an example with the 'A' uppercase and lowercase: 

And the do the same with the metric values: 

Once these replacements are done, you can fuse this back into the font: 

// to fuse to the font
ftxdumperfuser -t hmtx -A f Futura.ttc
ftxdumperfuser -t glyf -A f Futura.ttc

2. Change vertical offset

If the font is displayed too high or too low, you wan want to change the vertical offset. To achieve this, you will extract the 'hhea' table and the property to edit is the  'ascender value'.

// to extract the font
ftxdumperfuser -t hhea -A d Futura.ttc

// to fuse the font
ftxdumperfuser -t hhea -A f Futura.ttc

Try different ascender values till you got the baseline you expect.  I had to almost divide mine by 2 to get the right alignement.

3. Rename the font

If you want to be able to use the font you edited and the original font in the same iOS project you need to rename the font with a different name. There is also a table for that. 

The table 'name' includes the human readable names.

FuturaUppercase-Medium

// to extract from the font
ftxdumperfuser -t name -A d Futura.ttc

// to fuse to the font
ftxdumperfuser -t name -A f Futura.ttc

iOS use the postscript name to load a font, so that the one you want to edit: 

External Link

http://stackoverflow.com/questions/7535498/uibutton-custom-font-vertical-alignment