Using custom fonts in Xamarin Forms

Xamarin Forms is a great platform for quickly making multi-platform mobile apps. Xamarin markets it as a platform that isn’t quite suited for creating complex UIs but that doesn’t necessarily have to be the case. When it comes to branding your app using a custom font can go a long way.

The problem that arises is that both Android and iOS handle custom fonts in a fundamentally different way. So let’s find a way that works the same way for both shall we?

Adding a custom font in iOS

Let’s start with iOS. To add our custom font to our application we simply add the font file to the Resources folder. You can use subdirectories if you want to (I used Fonts in this sample). Once you add the font(s) you’ll have to ensure that the Build Action for each font is set to BundleResource and Always copy is set as the Copy to output directory property.

ios_customfont

After adding our fonts to the application we will have to tell iOS where it can find these custom fonts. That is done by editing the Info.plist file. Open it up in the plist editor and add the Fonts provided by application key. Add all the fonts you want to use as separate keys within the array.

When using the custom font in iOS you have to use the actual (internal) font name. This is not necessarily the same as the filename. An easy method to figure out the correct name you have to use is to write all the installed fonts to the debug window when the app is started. You can use the following gist to do so.

Tying it all together

The last part we need to do is telling our Xamarin Forms pages which font we want to use. The important part of achieving this across both platforms is simply making sure that the FontFamily we set matches the iOS font name we found earlier using the font loop in the AppDelegate class. For Android to keep up we simply have to name the .ttf file after the iOS font name. When we set a FontFamily in our Xamarin Forms page iOS uses that to find a font matching it based on the font name. On Android our custom renderer tries to match it to an actual file name in the Assets folder so we simply have to make sure these names correspond with one another.