{"id":19368,"date":"2015-05-02T20:44:12","date_gmt":"2015-05-02T15:14:12","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=19368"},"modified":"2015-05-02T20:44:12","modified_gmt":"2015-05-02T15:14:12","slug":"fix-vertical-position-issue-of-custom-ios-fonts","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/fix-vertical-position-issue-of-custom-ios-fonts\/","title":{"rendered":"Fix Vertical Position Issue of Custom iOS Fonts"},"content":{"rendered":"<p>Custom fonts can make all the difference in the world when you\u2019re trying to convey a specific user experience. Luckily, it\u2019s pretty easy to add your own fonts in your iOS app but most of the custom fonts usually have some issue with their vertical alignment. Either they sit too low or too high when compared to the default fonts. This poses a lot of problems and makes it quite difficult to get things aligned properly. The cause of this is that your custom font has an <strong>ascender<\/strong> and <strong>descender<\/strong> settings which are not being rendered properly by iOS.<br \/>\n<a href=\"\/blog\/wp-ttn-blog\/uploads\/2015\/05\/iOS-Simulator-Screen-Shot-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"\/blog\/wp-ttn-blog\/uploads\/2015\/05\/iOS-Simulator-Screen-Shot-1.png\" alt=\"iOS Simulator Screen Shot 1\" width=\"740\" height=\"180\" class=\"alignnone size-full\" \/><br \/>\nLet me explain quickly what these two are before going any further. The <strong>ascender<\/strong> is essentially the whitespace at the top of a font and the <strong>descender<\/strong> is the whitespace at the bottom of a font, the two combined space the font out correctly in relation to screen elements and other fonts.<br \/>\nTo edit these in the font you will need to download the <a href=\"https:\/\/developer.apple.com\/fonts\/\" title=\"Apple Font Tool Suite\" target=\"_blank\">Apple Font Tool Suite<\/a>. Once you\u2019ve installed this you need to open Terminal and navigate to the directory that contains your font. After that enter the following command:<\/p>\n<p><code>ftxdumperfuser -t hhea -A d font.ttf <\/code><\/p>\n<p>This will create a file called font.hhea.xml, open this new file into a xcode and adjust the values for ascender and descender. Generally \t<\/p>\n<li>\n<ul>\nif you font sits too low you have to decrease ascender and increase descender<\/ul>\n<\/li>\n<li>\n<ul>\nif you font sits too high you have to increase ascender and decrease descender<\/ul>\n<\/li>\n<p><\/br><br \/>\nFor example in above image fonts sits too high, open font.hhea.xml in xcode<a href=\"\/blog\/wp-ttn-blog\/uploads\/2015\/05\/Screen-Shot-2.png\"><img decoding=\"async\" loading=\"lazy\" src=\"\/blog\/wp-ttn-blog\/uploads\/2015\/05\/Screen-Shot-2.png\" alt=\"Screen Shot 2\" width=\"763\" height=\"712\" class=\"alignnone size-full\" \/><br \/>\nNow increse ascender and decrease descender.<br \/>\n<a href=\"\/blog\/wp-ttn-blog\/uploads\/2015\/05\/Screen-Shot-3.png\"><img decoding=\"async\" loading=\"lazy\" src=\"\/blog\/wp-ttn-blog\/uploads\/2015\/05\/Screen-Shot-3.png\" alt=\"Screen Shot 3\" width=\"778\" height=\"702\" class=\"alignnone size-full\" \/><br \/>\nAfter editing and saving enter the following command into terminal to reconstruct your Font file:<\/p>\n<p><code>ftxdumperfuser -t hhea -A f font.ttf<\/code><\/p>\n<p><a href=\"\/blog\/wp-ttn-blog\/uploads\/2015\/05\/iOS-Simulator-Screen-Shot-5.png\"><img decoding=\"async\" loading=\"lazy\" src=\"\/blog\/wp-ttn-blog\/uploads\/2015\/05\/iOS-Simulator-Screen-Shot-5.png\" alt=\"iOS Simulator Screen Shot 5\" width=\"657\" height=\"203\" class=\"alignnone size-full\" \/><br \/>\nYou can now use the font.ttf file in your application. If the font still isn\u2019t right just repeat the above procedure until you are happy!!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Custom fonts can make all the difference in the world when you\u2019re trying to convey a specific user experience. Luckily, it\u2019s pretty easy to add your own fonts in your iOS app but most of the custom fonts usually have some issue with their vertical alignment. Either they sit too low or too high when [&hellip;]<\/p>\n","protected":false},"author":172,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":125},"categories":[1400],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/19368"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/172"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=19368"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/19368\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=19368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=19368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=19368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}