Making a good app requires that all components was done properly and look and feel natively. Every button, every message should be perfectly aligned and configured.

But sometimes the problem waits for u in the most unexpected places.

Recently I have faced with custom font problem - the font is not properly aligned vertically. I’m talking about a font, that was used for Arabic localization and has the name FFShamelFamily.

The reason of issue was that Descender property of the font was incorrectly configured. And this results into next:

issue



Font

To fix this problem we can try to use some dark magic regarding every element that can show text, aka:

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = lineSpacing
paragraphStyle.lineHeightMultiple = lineHeightMultiple

This is a naive and error-prone approach that should be skipped at the very beginning.

The better way to do this - is to dive a bit into fonts, and understood how it works and which components it has.

As always, 1 image worce a 1000 words. In this case I found at some post this:

font_components



Now, even without deep dive into font anatomy, we can see the problem-making part of the issue - descender.

The good question here is how we can modify this descender. Reading a bit more about the font and how do they create and managed, I found that there is a special table, that can control a lot of font parameters. The name for this table - hhea (Horizontal Header Table)

The hhea table

If we check Apple’s post about it available here, we can find that The ‘hhea’ table contains information needed to layout fonts whose characters are written horizontally, that is, either left to right or right to left. This table contains information that is general to the font as a whole. The information which pertains to specific glyphs is given in the ‘hmtx’ table.

There are a lot of params that we can use to modify the font:

font_components



source

There are a lot of other components in fonts, to know all about which required a separate book at least. But for us, this information is enough and we can move forward.

Font modification

The next step - we should find a way how we can modify the font. Luckily for us, Apple prepared a set of tools, that can be used for such modification and is available here.

U can check this link to find out the latest font tools available. The good thing is that this package contains a lot of the tutorials and information needed for working with a font.

In our case, the problem can be solved with ftxdumperfuser that can modify font attributes.

First - we should read attributes:

ftxdumperfuser -t hhea -A d <font>

in my case:

khb@MacBook-Pro-Kyryl test % ftxdumperfuser -t hhea -A d /Users/khb/Desktop/example/FFShamelFamily-SemiRoundBold.otf

This produce additional file FFShamelFamily-SemiRoundBold.hhea.xml:

file



With content:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE hheaTable [
<!ELEMENT hheaTable EMPTY>
<!ATTLIST hheaTable versionMajor CDATA #IMPLIED
	versionMinor CDATA #IMPLIED
	ascender CDATA #IMPLIED
	descender CDATA #IMPLIED
	lineGap CDATA #IMPLIED
	advanceWidthMax CDATA #IMPLIED
	minLeftSideBearing CDATA #IMPLIED
	minRightSideBearing CDATA #IMPLIED
	xMaxExtent CDATA #IMPLIED
	caretSlopeRise CDATA #IMPLIED
	caretSlopeRun CDATA #IMPLIED
	caretOffset CDATA #IMPLIED
	metricDataFormat CDATA #IMPLIED
	numberOfHMetrics CDATA #IMPLIED
>
]>
<!--
	
	Data generated 	2021-10-30, 09:56:19 GMT+3
	Generated by ftxdumperfuser build 359,
		FontToolbox.framework build 353
	
	Font full name: 'FF Shamel Family SemiRound Bold'
	Font PostScript name: 'FFShamelFamily-SemiRoundBold'
	
-->
<hheaTable
	versionMajor="1"
	versionMinor="0"
	ascender="1100"
	descender="-1100"
	lineGap="0"
	advanceWidthMax="1564"
	minLeftSideBearing="-329"
	minRightSideBearing="-330"
	xMaxExtent="1564"
	caretSlopeRise="1"
	caretSlopeRun="0"
	caretOffset="0"
	metricDataFormat="0"
	numberOfHMetrics="254"
	/>

Here we can easily found the trouble-maker:

descender="-1100"

We can change this value (in my case to -500) and pack it back to font, using a similar command:

ftxdumperfuser -t hhea -A f <font>
khb@MacBook-Pro-Kyryl test % ftxdumperfuser -t hhea -A f /Users/khb/Desktop/test/FFShamelFamily-SemiRoundBold.otf

Result:

fixed_issue



pitfalls

On prev os version OS fonts packadge failed during installation:

fixed_issue



There is a great step-by-step guide available here if u faced with a similar problem

Alternatively, u can use various font-editing tools like FontForge if u find this way not appropriate for u. Another alternative is Glyphs. Example described here.

Resources