Android – XAMARIN: cross platform FontFamily

androidfontsxamarin

I need to specify different FontFamily for different Labels in my app. I need to use the default fonts (e.g. Roboto for Android and Helvetica for iOS) with their modifications (e.g. Light, Medium, Bold). As far as I understand I should be using Roboto-Light and Helvetica-Light to get the Light version of the fonts (same for Medium and Bold).
In addition to this requirement I need to set the fonts in XAML (like described in documentation) so I end up with this code

<StackLayout BackgroundColor="#F8F8F8" Padding="0, 20, 0, 0">
<Label Text="Black" TextColor="#000000" >
  <Label.FontSize>
    <OnPlatform x:TypeArguments="x:Double"
                iOS="17"
                Android="16"
                WinPhone="16" />
  </Label.FontSize>
  <Label.FontFamily>
    <OnPlatform x:TypeArguments="x:String">
      <OnPlatform.iOS>Helvetica-Black</OnPlatform.iOS>
      <OnPlatform.Android>Roboto-Black</OnPlatform.Android>
      <OnPlatform.WinPhone></OnPlatform.WinPhone>
    </OnPlatform>
  </Label.FontFamily>
</Label>
<Label Text="Light" TextColor="#000000">
  <Label.FontSize>
    <OnPlatform x:TypeArguments="x:Double"
                iOS="17"
                Android="16"
                WinPhone="16" />
  </Label.FontSize>
  <Label.FontFamily>
    <OnPlatform x:TypeArguments="x:String">
      <OnPlatform.iOS>Helvetica-Light</OnPlatform.iOS>
      <OnPlatform.Android>Roboto-Light</OnPlatform.Android>
      <OnPlatform.WinPhone></OnPlatform.WinPhone>
    </OnPlatform>
  </Label.FontFamily>
</Label>
<Label Text="Medium" TextColor="#000000" >
  <Label.FontSize>
    <OnPlatform x:TypeArguments="x:Double"
                iOS="17"
                Android="16"
                WinPhone="16" />
  </Label.FontSize>
  <Label.FontFamily>
    <OnPlatform x:TypeArguments="x:String">
      <OnPlatform.iOS>Helvetica-Medium</OnPlatform.iOS>
      <OnPlatform.Android>Roboto-Medium</OnPlatform.Android>
      <OnPlatform.WinPhone></OnPlatform.WinPhone>
    </OnPlatform>
  </Label.FontFamily>
</Label>
<Label Text="Bold"  TextColor="#000000">
  <Label.FontSize>
    <OnPlatform x:TypeArguments="x:Double"
                iOS="17"
                Android="16"
                WinPhone="16" />
  </Label.FontSize>
  <Label.FontFamily>
    <OnPlatform x:TypeArguments="x:String">
      <OnPlatform.iOS>Helvetica-Bold</OnPlatform.iOS>
      <OnPlatform.Android>Roboto-Bold</OnPlatform.Android>
      <OnPlatform.WinPhone></OnPlatform.WinPhone>
    </OnPlatform>
  </Label.FontFamily>
</Label>

However, the result in Android is unexpected. The FontFamily of the different Labels is not changed. They all look the same.

Android

The same code in iOS works as expected

enter image description here

My question is: How to get the Roboto-Light, Roboto-Medium and Roboto-Bold fonts in my Android app if following XAMARIN documentation does not work?

Best Answer

Update:

I did not see that you were using API 18 / 4.3 the first time (in the title bar of your emulator), thought you were loading them as custom assets for older android versions. Since roboto is the default font since 4.1, you can use them as:

  • sans-serif
  • sans-serif-light
  • sans-serif-condensed
  • sans-serif-thin (4.2+)

Original:

https://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/fonts/

Xamarin.Forms for Android does not currently expose the ability to set the font to a custom font file, so custom renderers are required. When writing the renderer for the Android platform, create a Typeface instance that references a custom font file that has been added to the Assets directory of the application (with Build Action: AndroidAsset).

[assembly: ExportRenderer (typeof (MyLabel), typeof (MyLabelRenderer))]
namespace WorkingWithFonts.Android {
    public class MyLabelRenderer : LabelRenderer {
        protected override void OnElementChanged (ElementChangedEventArgs<Label> e) {
            base.OnElementChanged (e);
            var label = (TextView)Control; // for example
            Typeface font = Typeface.CreateFromAsset (Forms.Context.Assets, "SF Hollywood Hills.ttf");
            label.Typeface = font;
        }
    }
}
Related Topic