Custom Fonts in Xamarin Forms

First off, this post Fonts in Xamarin.Forms is a far more complete description of all things font related in Xamarin Forms than this post will be, so go check it out.

In this post I’m just going to discuss how we can add and use “custom” fonts, i.e. fonts not on a device by default.

Custom Fonts

In this instance a custom font simply means a font that’s not, by default, loaded onto a device.

We can find lots of free fonts etc. via Google Fonts.

As per the previously mentioned Microsoft/Xamarin post, we’ll demonstrate things using the Lobster-Regular.ttf font.

Within Google Font simply search for Lobster and then download the Lobster.zip to your machine. If you then unzip this file you’ll have two files, the .ttf and a license file.

To look at the font and/or to get the Font name, in Windows we can right mouse click the .ttf file and select Preview. Hence we see the following

  • Font name: Lobster
  • Version: Version 2.100
  • OpenType Layout, TrueType Outlines

We also see a sample of the font for the alphabet, but more interestingly a sample for different font sizes, 12, 18, 24, 36 etc.

Preview Feature

Within the previously mentioned post they talk about adding your custom font to the shared project of your Xamarin Forms application. This was a preview feature and at the time of writing this post, I was unable to see this work. Hence this post will be out of data as soon as this is implemented. However for completeness I’ll relay what the post says on this.

To add a custom font to your shared project…

  • Create a Resources/Fonts folder (this folder configuration isn’t a requirement)
  • Add your .ttf or otf font files to this new folder and mark their properties as Embedded Resource
  • In the AssemblyInfo.cs file (for example) ad the ExportFont attribute, for example 
    using Xamarin.Forms;

[assembly: ExportFont("Lobster-Regular.ttf")]

    • Using the font is then as simple as writing the following

    <Label Text="Hello Xamarin.Forms"
   FontFamily="Lobster-Regular" />

    Existing/non-preview usage

    So, as mentioned, I was unable to get the preview working at this time, so let’s look at the “current” way to implement custom fonts. Let’s therefore assume we did not do any of the Preview steps.

    For Android…

    Copy your .ttf or .otf files into your Android project’s Assets folder and mark them as AndroidAsset via the file’s properties option in Visual Studio.

    Now it the shared project we need to reference the font slightly differently

    <Label Text="Hello Xamarin.Forms"
   FontFamily="Lobster-Regular.ttf#Lobster Regular" />

    For iOS…

    Copy your .ttf or .otf files into your iOS project’s Resources folder and mark them as BundleResource via the file’s properties option in Visual Studio.

    There’s and addition step, where we need to add the font(s) to the info.plist, i.e.

    <key>UIAppFonts</key>
<array>
    <string>Lobster-Regular.ttf</string>
</array>

    The big difference to the Android example is that the code only has the typeface name, for example

    <Label Text="Hello Xamarin.Forms"
   FontFamily="Lobster-Regular" />

    For UWP…

    Copy your .ttf or .otf files into your UWP project’s Assets folder and mark them as Content via the file’s properties option in Visual Studio.

    As per the Android example, the code would look like this within the shared project

    <Label Text="Hello Xamarin.Forms"
   FontFamily="Lobster-Regular.ttf#Lobster Regular" />

    Different fonts for different OS’s

    As you’ve seen in the examples for setting the FontFamily attribute, Android and iOS differ in what they expect, so we’re going to need a better way to supply this value. Or it may be we actually want different font’s on different devices.

    We can create a style and use OnPlatform capabilities of Xamarin Forms to achieve this.

    i.e. in this example we’ll set the fonts 

    <ResourceDictionary>
  <OnPlatform x:TypeArguments="x:String" x:Key="LabelFont">
    <On Platform="Android" Value="Lobster-Regular.ttf#Lobster Regular" />
    <On Platform="UWP" Value="/Assets/Lobster-Regular.ttf#Lobster Regular" />
    <On Platform="iOS" Value="Lobster-Regular" />
  </OnPlatform>
</ResourceDictionary>

    and then we can change our Label sample code to the following

    <Label Text="Hello Xamarin.Forms"
   FontFamily="{StaticResource LabelFont}" />

    Sample Project

    See https://github.com/putridparrot/blog-projects/FontTestApp