Post
Ask Question

Using Custom Fonts In Xamarin.Forms For iOS App

The article is just an extension of my article "Using Custom Fonts In Xamarin.Forms". So, before you proceed with this blog, please go through my previous  article.

In this write-up, I will explain you how to add custom fonts for Xamarin.Forms iOS app.



Step 1

After creating XAML file, add your (custom font) .ttf files in Resources folder of iOS project, as shown in the above screenshot. In my project, my custom font file is "Pacifico.ttf".



Step 2

Open the properties of (custom font).ttf file by right clicking on the file and changng the "Copy to Output Directory" option to "Copy always".



Step 3

Open the info.plist file of iOS project in XAML (text) editor view, and copy the following code in it.

  1. <key>UIAppFonts</key>  
  2.   
  3. <array>  
  4.   
  5.     <string>(your custom font file).ttf</string>  
  6.   
  7. </array>  
As shown in the above screenshot.



step 4

Open your .xaml file and copy the following code in it.
  1. <ContentPage.Resources>  
  2.     <ResourceDictionary>  
  3.         <Style x:Key="BaseLabelStyle" TargetType="Label">  
  4.             <Setter Property="TextColor" Value="Black"/><Setter Property="FontSize" Value="25"/>  
  5.         </Style>  
  6.         <Style x:Key="PacificoLabelStyle" TargetType="Label" BaseResourceKey="BaseLabelStyle">  
  7.             <Setter Property="FontFamily"><Setter.Value><OnPlatform x:TypeArguments="x:String" iOS="Pacifico" Android="Pacifico.ttf#Pacifico"/></Setter.Value></Setter>  
  8.         </Style>  
  9.     </ResourceDictionary>  
  10. </ContentPage.Resources>  
  11. <StackLayout>  
  12.     <Label Text="Default" Style="{StaticResource BaseLabelStyle}"></Label>  
  13.     <Label Text="Default" Style="{StaticResource PacificoLabelStyle}"></Label>  
  14. </StackLayout>  
Step 5

Finally, when you run the project in your iOS Simulator, the following output appears.