How to Add Custom Fonts to your App

Adding custom fonts differ a little bit based on platforms, but with these few simple steps, you should be fine.

iOS Platform

1. Get desired font - The file should be in ttf or otf format.

2. Add the file to the Resources folder in the iOS project

3. Set the Build Action property of the added font file to BundleResource

   • Right click on the file
   • Select Properties
   • You should see the Build Action
     

4. Include the file in info.plist.

   • Open info.plist (Source tab) and add a key called UIAppFonts (the friendly name is Fonts Provided by Application).
   • It should be of type Array.
   • Then add the file name of the font under the just added key. This should be of type String.

5. Next, we have to reference our font and for that we’ll move to our PCL project. Add the FontFamily property to the desired control as shown in the code below:

<Label.FontFamily>
    <OnPlatform x:TypeArguments="x:String">
        <OnPlatform.iOS>SFUIText-Semibold</OnPlatform.iOS>
    </OnPlatform>                 
</Label.FontFamily>

Be sure to remember to use the font name and not the file name.

What's the difference, you may ask?

Well, you may use the code below to get installed font names on your app. Place the code in the AppDelegate.cs file of your iOS project.

foreach (var family in UIFont.FamilyNames)
{
    System.Diagnostics.Debug.WriteLine($"{family}");

    foreach (var name in UIFont.FontNamesForFamilyName(family))
    {					
        System.Diagnostics.Debug.WriteLine($"{name}");
    }
}

Viola!
Oh, don't forget to run your app.

Android Platform

1. As done in iOS, we first obtain the custom font file.
2. Then we add the file to the Assets folder in the Droid project.
3. Set the Build Action property of the added font file to AndroidAsset
   • Right click on the file
   • Select Properties
   • You should see the Build Action.

4 . All that is left now is to reference the file in the PCL project. This is a bit different from the way iOS references theirs. Follow the code below:

<Label.FontFamily>
    <OnPlatform x:TypeArguments="x:String">                   
        <OnPlatform.Android>OpenSans-Semibold.ttf#SFUIText-Semibold</OnPlatform.Android>
    </OnPlatform>
</Label.FontFamily>

5 . You should be able to view your app now.

Tip

You could combine both platform references as this:

<Label.FontFamily>
    <OnPlatform x:TypeArguments="x:String" iOS="SFUIText-Semibold" 
                                           Android="OpenSans-Semibold.ttf#SFUIText-Semibold" />
</Label.FontFamily>

Final look of the app

You can find the project here