CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.android
Vipin Krishna
Vipin Krishna

Reputation: 365

Xamarin change font in XAML

How can I change the font of a label in Xamarin.Forms XAML?

Predictions are not available for font family attribute in XAML.

I tried 2 or 3 fonts like 'Arial' in font family, but it's not working.

Help me to resolve this.

<StackLayout Orientation="Vertical">
        <Label Text="Welcome  !"
            VerticalOptions="Start" 
            HorizontalOptions="StartAndExpand"
            FontFamily="Arial" 
        />


</StackLayout>

Upvotes: 3

Views: 4348

Answers (3)

Vipin Krishna
Vipin Krishna

Reputation: 365

I resolved it by copying the font in 'Assets' folder for Android and changed the code as following:

 <StackLayout Orientation="Vertical">

        <Label Text="Hello Forms with XAML" FontFamily="ariblk.ttf#ariblk"/>
        <Label Text="New Line following the first line " FontFamily="chiller.ttf#chiller" />

 </StackLayout>

Upvotes: 2

Ajaysinh Dodiya
Ajaysinh Dodiya

Reputation: 175

store ttf file Location

  1. Android: YouNameSpace.Droid/Assets/Poppins-Light.ttf
  2. Ios: YouNameSpace.iOS/Resources/fonts/Poppins-Light.ttf

  3. for iOS Need to put Below line in info.plist file

    enter image description here

create static resource in App.xaml

<Application.Resources>
<ResourceDictionary> 
         <!-- FontFamily -->
        <OnPlatform x:Key="PoppinsBold"
                    x:TypeArguments="x:String"
                    iOS="Poppins-Bold"
                    Android="Poppins-Bold.ttf#Poppins"/>

        <OnPlatform x:Key="PoppinsLight"
                    x:TypeArguments="x:String"
                    iOS="Poppins-Light"
                    Android="Poppins-Light.ttf#Poppins" />

         <!-- style for Lable -->
         <Style x:Key="PoppinsBoldLabelStyle"
               TargetType="{x:Type Label}">
            <Setter Property="FontFamily"
             Value="{StaticResource PoppinsBold}" />
        </Style>

        <Style x:Key="PoppinsLightLabelStyle"
               TargetType="{x:Type Label}">
            <Setter Property="FontFamily"
             Value="{StaticResource PoppinsLight}" />
        </Style>
</ResourceDictionary>
</Application.Resources>

use static resource in Lable

<Label Text="Hello"  Style="{StaticResource PoppinsBoldLabelStyle}"/>

Upvotes: 2

Robbit
Robbit

Reputation: 4358

Please refer to this, and here is official demo.

Or you can use Custom renderers.

Here download the Arial, and put your Assets/Fonts folder.

MyLabel in your PCL:

namespace FontTes
{
    public class MyLabel:Label
    {
    }
}

MyLabelRender in your Android platform:

using Android.Content;
using Android.Graphics;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(FontTes.MyLabel), typeof(FontTes.Droid.MyLabelRender))]
namespace FontTes.Droid
{
    class MyLabelRender: LabelRenderer
    {
        public MyLabelRender(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            var label = (TextView)Control;
            label.Typeface = Typeface.CreateFromAsset(Android.App.Application.Context.Assets, "Fonts/arial.ttf");

        }
    }
}

PCL's MainPage.xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FontTes;assembly=FontTes"
             x:Class="FontTes.MainPage">
    <StackLayout>

    <Label Text="Welcome to Xamarin.Forms!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center"/>
        <local:MyLabel
          Text="Welcome to Xamarin.Forms!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage>

Upvotes: 0

Related Questions