Xamarin Help

Custom Fonts in Xamarin.Forms

Custom fonts, means using a 3rd party font file (*.ttf) in your mobile app, instead of using any of the system defaults. As designers continue to wield more influence over the design of apps, custom fonts are an increasing necessity, especially since they want the app to look similar on multiple platforms.

Obtaining Fonts

If your company or designers don’t provide you with a font, you can download premium fonts from Envato or look at Google Fonts. You can also use a search engine to look for fonts, there are many sites available. Once you have decided on which you want, you will receive a TTF (TrueType Font) file.

Install Fonts

You have to place these font files in your Xamarin projects.

Android

Place in your Assets folder, and ensure the build type is AndroidAsset.

 

iOS

Place in your Resources folder, and ensure the build type is BundleResource.

In addition to this, on iOS you have to open up your info.plist, and add in the file names of the fonts you want to use.

<key>UIAppFonts</key>
<array>
    <string>OpenSans-Bold.ttf</string>
    <string>OpenSans-Regular.ttf</string>
</array>

UWP

Place in your Assets folder and ensure the BuildAction is set to Content.

 

Using Custom Fonts

Now we get to actually using them. Because referencing fonts requires different syntax for each OS. To best accommodate this, in your Application Resources, it is good to define your fonts.

<ResourceDictionary>
    <OnPlatform x:TypeArguments="x:String" x:Key="BoldFont">
        <On Platform="Android" Value="OpenSans-Bold.ttf#Open Sans" />
        <On Platform="UWP" Value="/Assets/OpenSans-Bold.ttf#Open Sans" />
        <On Platform="iOS" Value="OpenSans-Bold" />
    </OnPlatform>
    <OnPlatform x:TypeArguments="x:String" x:Key="NormalFont">
        <On Platform="Android" Value="OpenSans-Regular.ttf#Open Sans" />
        <On Platform="UWP" Value="/Assets/OpenSans-Regular.ttf#Open Sans" />
        <On Platform="iOS" Value="OpenSans-Regular" />
    </OnPlatform>
</ResourceDictionary>

For iOS we take the exact name of the file, without the extension. For Android we take the filename with the extension, hash, then the font’s actual name. If you open up the font, you will see its name listed, and it isn’t always the same as the filename.

Then to use the font, you just need to reference the key.

<StackLayout>
    <Label Text="Welcome to Xamarin Forms! (OpenSans-Bold)" FontFamily="{StaticResource BoldFont}" />
    <Label Text="Welcome to Xamarin Forms! (OpenSans-Regular)" FontFamily="{StaticResource NormalFont}" />
    <Label Text="Welcome to Xamarin Forms! (Default)" />
</StackLayout>

Summary

Remember to keep as much consistency throughout your app as possible. If you have a custom fonts, I recommend only using a maximum of 2 completely different fonts, with possible variations of each font type, for example bold, regular, light.

Posted

in

by

Adam P

Tags: