How can I change the font for the header of a Navi

Question

I can change the font color like this:

var homePage = new NavigationPage(new HomePage())
{ 
   Title = "Home",
   Icon = "ionicons_2_0_1_home_outline_25.png",
   BarTextColor = Color.Gray,
};

But is there a way to change the font for the Title. I would like to change it for the iOS and Android platforms only. Hoping that someone knows of custom renderer code that can help me to do this.

Answer 1

You need Custom Renderer , refer to this sample

iOS

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace CustomFontsNavigationPage.iOS.Renderers
{
public class CustomNavigationPageRenderer : NavigationRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            var att = new UITextAttributes();
            UIFont customFont = UIFont.FromName("Trashtalk", 20);
            UIFont systemFont = UIFont.SystemFontOfSize(20.0);
            UIFont systemBoldFont = UIFont.SystemFontOfSize(20.0 , FontAttributes.Bold);
            att.Font = font;
            UINavigationBar.Appearance.SetTitleTextAttributes(att);
        }
    }
}
}

Android

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace CustomFontsNavigationPage.Droid.Renderers
{
public class CustomNavigationPageRenderer : NavigationPageRenderer
{
    private Android.Support.V7.Widget.Toolbar _toolbar;

    public override void OnViewAdded(Android.Views.View child)
    {
        base.OnViewAdded(child);

        if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
        {
            _toolbar = (Android.Support.V7.Widget.Toolbar)child;
            _toolbar.ChildViewAdded += Toolbar_ChildViewAdded;
        }
    }

    protected override void Dispose(bool disposing)
    {
        base.Dispose(disposing);

        if(disposing)
        {
            _toolbar.ChildViewAdded -= Toolbar_ChildViewAdded;
        }
    }

    private void Toolbar_ChildViewAdded(object sender, ChildViewAddedEventArgs e)
    {
        var view = e.Child.GetType();

        if (e.Child.GetType() == typeof(Android.Widget.TextView))
        {
            var textView = (Android.Widget.TextView)e.Child;
            var spaceFont = Typeface.CreateFromAsset(Forms.Context.ApplicationContext.Assets, "Trashtalk.ttf");
            var systemFont = Typeface.DEFAULT;
            var systemBoldFont = Typeface.DEFAULT_BOLD;
            textView.Typeface = spaceFont;
            _toolbar.ChildViewAdded -= Toolbar_ChildViewAdded;
        }
    }
}
}

Answer 2

There is no need in a custom renderer on iOS, you can just use the Appearance API:

UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes
{
     Font = UIFont.FromName("MyCoolFont", 20)
});

In Android you do need a renderer, however you should check against Android.Support.V7.Widget.AppCompatTextView and not Android.Widget.TextView.

Tested on Xamarin.Forms 3.4.0