Xamarin.Forms Custom Font Family

In this article, I will explain the use of custom fonts in your Xamarin.Forms applications and how to use platform-specific font.

So, let’s started. Follow the steps below in order.

1) Download the font(s) you want to use

There are many sources you can download custom fonts to use in your applications. The most preferred font collection service of these is Google Fonts. Alternatively, you can also download free or paid fonts from sources such as DaFont or Font Squirrel.

First, download the font you want to use from any collection and extract it from ZIP. Xamarin.Forms only supports fonts with the extension oft and ttf. Pay attention to the extension of the font you are going to download.

I downloaded NunitoSans and Oswald fonts for this sample project because I usually use Google fonts in my own applications.

2) Put your font(s) in Resources folder

Put the fonts you downloaded into the Resources folder in the Android and iOS folders of your application. You can drag and drop it.

Actually, it doesn’t matter in which folder the fonts are located. You can add your fonts to the Assests folder or any other folder you have created. However, since the fonts are usually located in the Resources folder, I also put the fonts in the Resources folder.

3) Create resource dictionaries in App.xaml

Resource Dictionaries is a repository of resources created to customize XAML views. With resource dictionaries, you can customize the appearance of a XAML item to apply to all pages. The resources you create in App.xaml will be valid for the whole application. (Xamarin.Forms Resource Dictionaries)

For this sample project, let’s change the font of the Label elements on all pages in the application.

Add source controls into App.xaml as follows. Thus, the Label elements on all pages in the application will be customized according to this source. Remember to define the TargetType and x: Key attributes here.

<Application.Resources>
    <Style TargetType="Label">
        <Setter Property="FontSize" Value="Large"/>
        <Setter Property="HorizontalOptions" Value="Center"/>
    </Style>

    <Style x:Key="NormalFont" TargetType="Label">
        <Setter Property="FontFamily" Value="NunitoSans-Regular.ttf#NunitoSans-Regular.ttf"/>
    </Style>   
    <Style x:Key="BoldFont" TargetType="Label">
        <Setter Property="FontFamily" Value="NunitoSans-Bold.ttf#NunitoSans-Bold.ttf"/>
    </Style>
    <Style x:Key="ItalicFont" TargetType="Label">
        <Setter Property="FontFamily" Value="NunitoSans-Italic.ttf#NunitoSans-Italic.ttf"/>
    </Style>
</Application.Resources>

4) Consume your resources in XAML

Refer to keys defined in the resources you create in App.xaml such as NormalFont, BoldFont, ItalicFont in XAML Static.

In the code snippet below, the Label that is not binded to the source in a ContentPage has the default font of Xamarin.Forms. Other Labels appear with the font of the attribute it is binded to.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Weather.View.FontsPage">
    <ContentPage.Content>
        <StackLayout  Margin="0,50,0,0">
            <Label Text="Default Text"/>
            <Label Style="{StaticResource NormalFont}" Text="Normal Text"/>
            <Label Style="{StaticResource BoldFont}" Text="Bold Text"/>
            <Label Style="{StaticResource ItalicFont}" Text="Italic Text"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

After completing the steps, run the application.

Use of Platform-Specific Custom Font(s)

You can use a different font for each platform in your application. For example, the text in a Label may have a different font on the Android platform and on the iOS platform.

1. To do this, first create a page-level resource on the XAML page that contains the view item.
2. Then set a different font for each platform specific for TargetType within this resource.
3. Finally, refer to this resource Static from view element.

For example, the text in the Label element, which refers to the style with the BoldFont x: Key attribute in the code snippet below, appears as Oswald-Bold on the Adroid platform and NunitoSans on the iOS platform.

ContentPage codes:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Weather.View.FontsPage">
    <Page.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="FontSize" Value="Large"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
            </Style>

            <OnPlatform x:TypeArguments="x:String" x:Key="BoldFont">
                <On Platform="Android" Value="Oswald-Bold.ttf#Oswald-Bold.ttf" />
                <On Platform="UWP" Value="/Resources/NunitoSans-Bold.ttf#NunitoSans-Bold.ttf" />
                <On Platform="iOS" Value="NunitoSans-Bold.ttf" />
            </OnPlatform>
            <OnPlatform x:TypeArguments="x:String" x:Key="NormalFont">
                <On Platform="Android" Value="Oswald-Regular.ttf#Oswald-Regular.ttf" />
                <On Platform="UWP" Value="/Resources/NunitoSans-Regular.ttf" />
                <On Platform="iOS" Value="NunitoSans-Regular.ttf" />
            </OnPlatform>

        </ResourceDictionary>
    </Page.Resources>
    <ContentPage.Content>
        <StackLayout  Margin="0,50,0,0">
            <Label Text="Default Text"/>
            <Label FontFamily="{StaticResource NormalFont}" Text="Normal Text"/>
            <Label FontFamily="{StaticResource BoldFont}" Text="Bold Text"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Conclusion

In this article, I explained the use of custom fonts in your Xamarin.Forms applications and how to use platform-specific font. I hope it was useful.

If you’re still not sure what to do, or if you got any errors, then I suggest you use the comment section below and let me know! I am here to help!

Also, share this blog post on social media and help more people learn.