Breadcrumb arrow Back to Code Examples

How To Apply Custom Fonts In Xamarin.Forms Chart(Sfchart)?

Sample date Updated on Sep 13, 2025
Browse Code Git logo Download
chart charts custom-fonts example sfchart xamarin xamarin-forms

You can set a custom font family to all the text elements in the chart. The following steps describe how to add a custom font file in the platform-specific projects.

Android:

Add a custom font file in the Assets folder and set Build Action to AndroidAsset for the font file.

iOS:

Step1: Add a custom font file in the Resources folder and set Build Action to BundleResource. Then, ensure that the copy to output directory is set to AlwaysCopy.

Step2: Add a custom font file name in the info.plist file as demonstrated in the following code sample.

<dict>……<key>UIAppFonts</key>
<array>
<string>Lobster-Regular.ttf</string>
……</dict>

UWP:

Add a custom font file in the Assets folder and set Build Action to Content.

Please refer to the following code sample to set a custom font for chart legend labels.

XAML

<ResourceDictionary>
   <OnPlatform x:TypeArguments="x:String" x:Key="CustomFont">
      <On Platform="iOS" Value="Lobster-Regular" />
      <On Platform="Android" Value="Lobster-Regular.ttf#Lobster-Regular" />
      <On Platform="UWP" Value="Assets/Fonts/Lobster-Regular.ttf#Lobster" />
   </OnPlatform>
</ResourceDictionary>

<chart:SfChart.Legend>
   <chart:ChartLegend>
      <chart:ChartLegend.LabelStyle>
         <chart:ChartLegendLabelStyle FontFamily="{StaticResource CustomFont}" TextColor="Blue" FontSize="18"/>
      </chart:ChartLegend.LabelStyle>
   </chart:ChartLegend>
</chart:SfChart.Legend>

C#

chart.Legend = new ChartLegend();
chart.Legend.LabelStyle.TextColor = Color.Blue;

if (Device.RuntimePlatform == Device.Android)
{
    chart.Legend.LabelStyle.FontFamily = "Lobster-Regular.ttf#Lobster-Regular";
}
else if (Device.RuntimePlatform == Device.iOS)
{
    chart.Legend.LabelStyle.FontFamily = "Lobster-Regular";
}
else if (Device.RuntimePlatform == Device.UWP)
{
    chart.Legend.LabelStyle.FontFamily = "Assets/Fonts/Lobster-Regular.ttf#Lobster";
}

Output:

Chart legend with customized font in Xamarin.Forms

KB article - How to apply custom fonts in Xamarin.Forms Chart?

Requirements to run the demo

Troubleshooting

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

Up arrow