Xamarin.Forms: Custom Fonts with Android, macOS and WPF

Below you'll see how to add TTF font to Xamarin.Forms 3.0+ app and apply it to UI. In CPDT  there was the issue of ensuring same look of texts across platforms. As it turned out, there's little overlap between standard font families. If you wanted monospace font, you could end up with  monospace on Android, Consolas on WPF and Courier on macOS. Thuogh the fonts are very different. Besides, on macOS you could have compatability issues with standard fonts: some High Sierra fonts are not available in El Capitan or Yosemite (and running app relying in missing font will crash it). The easiest way was to find a freely available font, download TTF, add it to the project and update Xamarin.Forms styles.

Step 1 - Find and Download the Font

TTF file is OK. You might be OK with OTF as well, though I didn't test it. I simply googled for free font fonts and end-ed up with the one I liked: IBM Plex Mono.

Step 2 - Add the Fonts to Platform Projects

There's no way you can put TTF files into Xamarin.Forms shared project and ship them as assembly resource (and make them work). You have to add the files to each individual project.

Android

Add TTF files to the Assets folder of Android project. For all files set AndroidAsset build action.

WPF

Add TTF files to any folder, e.g. Fonts. The name of the folder is important as you'll need it latter to reference the fonts. For all files set build action to Resource.

macOS

Copy TTF files to macOS platform project under the folder Resources/Fonts. Set build action for TTF files to BundleResource. 

Edit info.plist  file and set ATSApplicationFontsPath value to Fonts. You can do this in XML editor:

 <key>ATSApplicationFontsPath</key>
 <string>Fonts</string>

Step 3 - Apply Styles in Xamarin.Forms Shared Project

Now that Fonts are properly bundled with all 3 platforms projects, they are ready to be referenced and used from within Xamain.Forms UI project.

The best way to do this is to:

1. Define styles as static resource, e.g. in App.xaml:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:Saplin.CPDT.UICore" 
             xmlns:ctrl="clr-namespace:Saplin.CPDT.UICore.Controls" 
             xmlns:vm="clr-namespace:Saplin.CPDT.UICore.ViewModels" 
             xmlns:csr="clr-namespace:System.Collections.Generic;assembly=System.Runtime" 
             x:Class="Saplin.CPDT.UICore.App">
    <Application.Resources>
        <ResourceDictionary>

            <!-- FONTS-->
            <OnPlatform x:TypeArguments="Font" x:Key="FontNormal">
                <On Platform="macOS" Value="IBM Plex Mono, 15" />
                <On Platform="WPF" Value="./Fonts/IBMPlexMono-Regular.ttf#IBM Plex Mono, 15" />
                <On Platform="Android" Value="IBMPlexMono-Regular.ttf#IBMPlexMono-Regular, 15" />
            </OnPlatform>
            <OnPlatform x:TypeArguments="Font" x:Key="FontItalic">
                <On Platform="macOS" Value="IBM Plex Mono, Italic, 15" />
                <On Platform="WPF" Value="./Fonts/IBMPlexMono-Italic.ttf#IBM Plex Mono, 15" />
                <On Platform="Android" Value="IBMPlexMono-Italic.ttf#IBMPlexMono-Italic, 15" />
            </OnPlatform>

            <!--STYLES-->
            <Style x:Key="LabelStyle" TargetType="Label">
                <Setter Property="TextColor" Value="#FFCFCFCF" />
                <Setter Property="Font" Value="{StaticResource FontNormal}" />
            </Style>
            <Style x:Key="GrayedLabel" TargetType="Label">
                <Setter Property="TextColor" Value="#FF808080" />
                <Setter Property="Font" Value="{StaticResource FontItalic}" />
            </Style>

        </ResourceDictionary>
    </Application.Resources>
</Application>

2. Apply the styles to controls in XAML files:

<Label 
  x:Name="cpdt" Text="Cross Platform Disk Test" 
  HorizontalOptions="Start" 
  VerticalOptions="Start" 
  Style="{x:StaticResource Key=LabelStyle}" />
<Label x:Name="bitSystem" 
  HorizontalOptions="Start" 
  VerticalOptions="Start" 
  Style="{x:StaticResource Key=GrayedLabel}"/>

Please pay attention to the following specifics:

• Defining Fonts and referencing TTF files in XAML resources is done differently for each platform:
• macOS - you use Font Family name, e.g. IBM Plex Mono (with spaces) and add font attributes (such as Italic, Bold) after coma. Font Family name can be found in font viewer, e.g. if you double click the TTF file. Make sure you don't accidentally install the font to the system as you won't be able to test and troubleshoot font bundling within app.
• WPF - it's important to have the relative path to the font file defined properly, e.g. ./Fonts/IBMPlexMono-Italic.ttf (folder in WPF project, where TTF file is located + file name). Following the TTF file path there's # sign, after the sign you need to properly define Font Family name.
• Android - simply use TTF file name (bundled as AndroidAsset).
• Xamarin.Forms has issues with fonts in WPF (such as no font applied to formatted text in Label) in versions below 3.4.

That's is it!