Xamarin forms: Custom Fonts in UWP and Windows 8.1

Question

I am developing an app in which I am using a font.otf file. My app will run on android, ios, windows 10 and windows 8.1. I need to create styles for my labels to set font family. For android and ios I referenced this link

I tried in xaml page like this-

<Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <OnPlatform.iOS></OnPlatform.iOS>
            <OnPlatform.Android>Lobster-Regular.ttf#Lobster-Regular</OnPlatform.Android>
            <OnPlatform.WinPhone></OnPlatform.WinPhone>
        </OnPlatform>
    </Label.FontFamily>

new Label {
    Text = "Hello, Forms!",
    FontFamily = Device.OnPlatform (
        null,
        null,
        @"\Assets\Fonts\Lobster-Regular.ttf#Lobster-Regular"
                 // Windows Phone will use this custom font
    )
}

But when I run my app Font does not set for Windows 10 and 8.1.

How can I set font family for windows 10 and 8.1. Or is there more efficient way to apply font family with covering all the platforms?

Answer 1

Note: there is a bug where custom fonts do not work if you are using a NavigationPage

You do not need a custom renderer for custom fonts on Windows 8.1/UWP; the Xamarin sample code simply has a couple of mistakes:

• Use a forward slash ('/') instead
• The path should be in the form of [font file]#[font name] (without the font style, eg 'regular')

So the path in this case should actually be

"Assets/Fonts/Lobster-Regular.ttf#Lobster"

And you can also use this in Xaml

<OnPlatform.WinPhone>Assets/Fonts/Lobster-Regular.ttf#Lobster</OnPlatform.WinPhone>

Make sure your font file is included in your project with BuildAction:Content and it should work.

Answer 2

You could try create a CustomRenderer which overrides the Xamarin.Forms.Label on the Windows platform like so:

[assembly: ExportRenderer(typeof(Xamarin.Forms.Label), typeof(MyLabelRenderer))]
namespace MyApp.CustomRenderers.Controls
{
    public class MyLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                var font = new FontFamily(@"\Assets\Fonts\Lobster-Regular.ttf#Lobster-Regular");

                if (e.NewElement != null)
                {
                    switch (e.NewElement.FontAttributes)
                    {
                        case FontAttributes.None:
                            break;
                        case FontAttributes.Bold:
                            //set bold font etc
                            break;
                        case FontAttributes.Italic:
                            //set italic font etc
                            break;
                        default:
                            break;
                    }
                }
                Control.FontFamily = font;
            }
        }     
    }