Roboto Condensed Bold in Forms (iOS)

The last few days have been spent in pixel perfect land. I've done some fine tuning of a clients forms layouts that of course includes a bunch of custom fonts. I've started out with making sure that the iOS design is correct and we'll move on to Android and WP in another post perhaps.

This post is about a specific issue and that issue is how the naming of the font isn't all that matters.

Short version

Ttf-files only contain one weight. If you bold a regular version of a font it will be calculated bold and not the true bold since that one is contained in another file. To get the real bold, you need to reference the ttf-file containing the bold weight.

Start off here for the longer version

To get a grip of how to use custom fonts, please check out the Xamarin documentation at http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/fonts/ and also a post from Mike James that can be found here: https://blog.xamarin.com/custom-fonts-in-ios/

So what's the problem?

To summarize the usage of custom fonts loaded from a ttf-file on iOS, all described in the links above.

• Add the ttf-file to the Resource folder - make it a Bundled Resource and Copy Always
• Edit the info.plist to include the font

And then to use the font we do something like

<Label FontFamily="Roboto Condensed" Text="Very custom" />

To find out the FontFamily name to use, you open up the ttf-file in Windows by simply double clicking it and you'll find it. Since my client is a client, they wanted to use a different typeface for the bold text. No problem, I shouted and downloaded the bolder typeface perfectly named Roboto Condensed Bold.

I then opened the ttf file in windows to check out the name and it was named exactly the same. Wait what? How do I then distinguish between them?

It turns out that the Bold font has the same name and will be used if you set FontAttributes="Bold".

<Label FontFamily="Roboto Condensed" Text="Very custom" FontAttributes="Bold" />

And if you use the above without importing the "Roboto Condensed Bold" font it will Bold the regular font.

Still, what's the problem?

Really, nothing when I come to think of it. TrueType only supports one weight per file from what I understand and that's what I've missed in the past. I just thought that a font is a font and all is included within. :)

Also, if you only supply the regular weight and bold it, it would be some kind of calculated boldness instead of the real bold font that is meant to be used.

Extra material

Instead of using the FontAttributes that only supports Bold, Normal and Italic you can specify what font you'd like to us in the Font-attribute. For example, If I want to use Roboto Condensed Light I must specify the font name like this:

<Label FontFamily="Roboto Condensed" Text="Very custom" Font="RobotoCondensed-Light" />

How would I know what font names that are available for a font family? I use the following line of code on iOS to find out. 

var f =  UIFont.FontNamesForFamilyName("Roboto Condensed");

Summary

Make sure you reference all the weights you want and if they have the same name you only have to change the FontAttributes to select the font you wish for. But be careful and check that you actually get the weight you want since it would still bold a regular font instead of picking the correct one if you miss something along the way.

Resources

TrueType on Wikipedia - https://en.wikipedia.org/wiki/TrueType