Font is offset on simulator but not on device

When I use a custom TTF font (OpenSans), it is offset on my iPhone but not on the simulator (it is offset downwards). It’s very hard to design this way because in order for the design to look good on the device it has to look extremely weird on the simulator. 

My questions are:

  1. Has anyone else encountered this?

  2. Is there a way to solve this?

Cheers

It’s a known issue, and has been this way ever since I can remember. Using custom TTF fonts should minimize the issue however desktop and device always seem different in the way they calculate/use the metrics embedded in the font.

You can trust the Xcode Simulator though when testing as I’ve rarely seen any difference from a real device.

This has been a pet peeve of many, and I’m not so sure if CoronaLabs can do anything about it…

ingemar, thanks for your input. Have you ever seen discrepancies between iOS and Android devices on this issue or do they both have the same offset?

In my experience using the same custom TTF fonts behave the same on iOS / Android, however built-in system fonts can vary between iOS and Android, although not so much that you need to change your code (if you can accept minor differences). It all depends on the font you’re using as some fonts have more differences than others.

The best way to minimize the issue is to use bitmap fonts, however that’s not always an acceptable alternative. I use a combination of GlyphDesigner (https://71squared.com/glyphdesigner) to create the bitmap fonts and Font Manager (https://github.com/autismuk/Font-Manager) to use them with Corona.

We noticed that some third-party fonts (e.g. Open Sans) were not being positioned properly in the OS X Simulator and that has been fixed in Daily Builds 2015.2566 and later.

Also, in case it isn’t clear, with recent Daily Builds you can just put your font in your project directory (.otf or .ttf) and it will automatically be incorporated into your app when you build it (and there’s no need to install the font on your Mac to use it in your app in the Simulator).

Perry, that’s great news!

(I can’t see that build online yet; latest one available is 2015.2565. I’ll just have to wait a couple of days)

It’s a known issue, and has been this way ever since I can remember. Using custom TTF fonts should minimize the issue however desktop and device always seem different in the way they calculate/use the metrics embedded in the font.

You can trust the Xcode Simulator though when testing as I’ve rarely seen any difference from a real device.

This has been a pet peeve of many, and I’m not so sure if CoronaLabs can do anything about it…

ingemar, thanks for your input. Have you ever seen discrepancies between iOS and Android devices on this issue or do they both have the same offset?

In my experience using the same custom TTF fonts behave the same on iOS / Android, however built-in system fonts can vary between iOS and Android, although not so much that you need to change your code (if you can accept minor differences). It all depends on the font you’re using as some fonts have more differences than others.

The best way to minimize the issue is to use bitmap fonts, however that’s not always an acceptable alternative. I use a combination of GlyphDesigner (https://71squared.com/glyphdesigner) to create the bitmap fonts and Font Manager (https://github.com/autismuk/Font-Manager) to use them with Corona.

We noticed that some third-party fonts (e.g. Open Sans) were not being positioned properly in the OS X Simulator and that has been fixed in Daily Builds 2015.2566 and later.

Also, in case it isn’t clear, with recent Daily Builds you can just put your font in your project directory (.otf or .ttf) and it will automatically be incorporated into your app when you build it (and there’s no need to install the font on your Mac to use it in your app in the Simulator).

Perry, that’s great news!

(I can’t see that build online yet; latest one available is 2015.2565. I’ll just have to wait a couple of days)