Skip to main content

Setting up Fonts

Grial 4 includes a resource file to include font references:

Grial
|_ Styles
|_ AppFontFamilies.xaml

...this file is merged with App.xaml, so all themes inherit it.

At the top most of this file you will find the main resources in charge of setting the global font for the app as well as the bold and "fancy" font (used for specifically for the NavigationBar):

<OnPlatform x:Key="AppFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="SourceSansPro-Regular.ttf#Source Sans Pro"/>
<On Platform="iOS" Value="Source Sans Pro"/>
</OnPlatform>

<OnPlatform x:Key="AppBoldFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="SourceSansPro-Bold.ttf#Source Sans Pro"/>
<On Platform="iOS" Value="Source Sans Pro"/>
</OnPlatform>

<OnPlatform x:Key="FancyFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="Billabong.ttf#Billabong"/>
<On Platform="iOS" Value="Billabong"/>
</OnPlatform>

If you would like to change the default font family for your app (AppFontFamily) just change the values in the setters to match your font.

Suppose you want to change the FancyFontFamily to use Lobster-Regular.ttf font, then, you will need:

  • including the font file into each platform project
  • setting its build action properly
  • finally, changing the FancyFontFamily resource as follows:
<OnPlatform x:Key="FancyFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="Lobster-Regular.ttf#Lobster-Regular"/>
<On Platform="iOS" Value="Lobster-Regular"/>
</OnPlatform>

For more details about how to work with fonts in Xamarin.Forms please check "Fonts in Xamarin.Forms" in Microsoft documentation .