Xamarin Forms Custom Font iOS

Question

Xamarin v4.4.0.991640 (latest at this time)

I have implement code so that the App (Android and iOS) use a custom font. I have also implemented a Custom Renderer so that the Navigation Header also uses the custom font. Android is working fine (in both cases), but in iOS, the font is not used at all?

In iOS I have done the following:

The ttf file is in Resources/Fonts/Promento.ttf (BundleResource)

In Info.plist I have

  <key>UIAppFonts</key>
  <array>
        <string>Fonts/Promento.ttf</string>
  </array>

In a ResourceDictionary I have:

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

The font just does not seem to be picked up. In my Custom Renderer I have:

[assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.Forms.NavigationPage), typeof(CustomNavigationRenderer))]
namespace GlueStep.Mobile.iOS.Renderers
{
    public class CustomNavigationRenderer : NavigationRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (!(e.NewElement is null))
            {
                var attributes = new UITextAttributes();
                attributes.Font = UIFont.FromName("Promento", 24);

                UINavigationBar.Appearance.SetTitleTextAttributes(attributes);
            }
        }
    }
}

What I have noticed is that if I set a break point on this line and then visit a Navigation Page:

UINavigationBar.Appearance.SetTitleTextAttributes(attributes);

Then attributes.Font is always null?

Can anyone see what I am missing?

1) Open the font in FontBook to check that the name iOS/macOS is using is the one you are using. 2) To double-check your font registration, review the code in my answer here: stackoverflow.com/a/48191854/4984832 — SushiHangover
Aggghhh. The font is prometo not promeNto. And with your help, I now have it working. Thanks very much — Rob L
@RobL Hi , glad to see you have solved it ! Remember to share solution in answer when you have time .😊 — Junior Jiang

Rob L Rob L · Accepted Answer · 2020-02-21T03:55:43

The final working details are as follows:

Font Location:

Resources/Fonts/PrometoW02-Regular.ttf

Resource Dictionary (ignore the Android line, in that app it is simply "Prometo.ttf". I guess it could be renamed):

<OnPlatform x:TypeArguments="x:String" x:Key="Prometo">
    <On Platform="Android" Value="Prometo.ttf#Prometo" />
    <On Platform="iOS" Value="PrometoW02-Regular" />
</OnPlatform>

Info.plist:

  <key>UIAppFonts</key>
  <array>
        <string>Fonts/PrometoW02-Regular.ttf</string>
  </array>

Usage Example:

<Style Class="OK" TargetType="Button">
    <Setter Property="FontFamily" Value="{StaticResource Prometo}" />

Xamarin Forms Custom Font iOS

1 Answers