How to change Shell.Title font?

Question

This is the current AppShell.xaml:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    Title="MauiApp1">

    <FlyoutItem
        Title="Settings"
        Icon="settings_24">
    </FlyoutItem>
    <ShellContent
        Title="CHANGE THIS FONT"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage"
        />

</Shell>

The place I'm talking about is this CHANGE THIS FONT:

So far I was able to center the Android version with this snippet from another answered question here:

MauiProgram.cs

	public static MauiApp CreateMauiApp()
	{
		// ...
		Microsoft.Maui.Handlers.ToolbarHandler.Mapper.AppendToMapping("CustomNavigationView", (handler, view) =>
					{
#if ANDROID
                Google.Android.Material.AppBar.MaterialToolbar materialToolbar=handler.PlatformView;
 
                materialToolbar.TitleCentered = true;
#endif
					});

		// ...
	}

But now I just simply want to change the Font Family for the Title in both devices. I can only find Shell.TitleColor on Styles.xaml but nothing related to Font or Font Family in the Shell part of Styles.xaml, is it impossible to change such simple thing?

Answer 1

Hello,

If you want to set Font for title and make the Title in the center of the Title bar.

Firstly, we can download the font, the copy the font file to /Resouces/Font folder and make sure build action of font is MauiFont.

Then open your MauiPrgram.cs to register this font.

builder
         .UseMauiApp<App>()
         .ConfigureFonts(fonts =>
         {
             fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
             fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
             // configure your font here
             fonts.AddFont("MotionPicture.ttf", "testFont");
         })

Then open specific page, for example, if you have MainPage.xaml. Use re-write the layout of <Shell.TitleView > and set the Title's font and content. Please do not rewrite <Shell.TitleView > in appShell.xaml. it will make all pages have a same title. If you want to keep the title to the center in android platform. Just set left-Margin for android platform, you can refer to the following code.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp11"
             HideSoftInputOnTapped="True"
         
             x:Class="MauiApp11.MainPage">
<Shell.TitleView >
<Grid  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="Home"
               FontFamily="testFont"
                   Margin="{OnPlatform Android='0,0,75,0'}"
               HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
               FontSize="20" >
</Label>
</Grid>
</Shell.TitleView>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.