Set custom font globally in Xamarin Forms on Android and iOS

In your Xamarin Forms project like any other mobile development enviornment you can set a custom font implicitly and explicitly in your mobile app. Let’s see how to do this in Xamarin Forms.

Add the fonts resources

First download and use the ttf version of the fonts. For example you can use the Google Fonts Github Repo to find fonts files.

To avoid problems i recommend to remove the - character from the name to avoid Android resource name incompatibility.

Now add the fonts to the solution to both the platforms through Visual Studio:

  • on iOS add the font to the Resources folder, right click on the font file and set it to Build Action > BundleResource
  • on Android add the font to Assets folder, right click on the file and set it to Build Action > AndroidAsset

Now we need to tell the app to use the fonts.

Set the font globally for Labels

Open the PCL project of the solution (the project with the Xamarin Forms code) and edit the file App.xaml, add the part inside the Application.Resources to tell the Xamarin Forms application to use hour fonts.

DosisRegular.ttf is the file name of the font and Dosis is the name of the font as it is called inside the font file. To get the name of the font you can open the ttf file with a program that can open these files and look how it is named.

If you are on OSX i recommend to use a little command line utility named otfinfo to get this name, install it via brew:

Pass to otfinfo the path of the ttf file:

In the output we consider the Family attribute

Family:              Dosis
Subfamily:           Regular
Full name:           Dosis Regular
PostScript name:     Dosis-Regular
Mac font menu name:  Dosis Regular
Version:             Version 1.007

So put the Family attribute value in the On tag for iOS and for Android after the # character.

Only iOS we need to add this further configuration, edit the Info.plist file with a text editor and add this part inside the dict section:

Set the font globally in the navigation bars

As a plus to set the font globally on the navigation bar we can add these custom renderers inside our project, edit the string with the font file name.

On Android add this file

and set this line before the MainActivity class

On iOS inside the FinishedLaunching method of the AppDelegate class add the part that call SetTitleTextAttributes method. Set the name of the font inside the font file to configure.

And we are done.