AvaloniaCommunity / Material.Avalonia

Material design in AvaloniaUI
MIT License
834 stars 77 forks source link

Proper FontFamily setting #407

Open SKProCH opened 1 month ago

SKProCH commented 1 month ago

Discussed in https://github.com/AvaloniaCommunity/Material.Avalonia/discussions/406

Originally posted by **PRNDA** October 7, 2024 Hey everyone, I want to replace the default font in Material Avalonia globally. I have googled around for a while, but nothing useful has been found.
PRNDA commented 1 month ago

The default font is defined as a FontFamily resource name MaterialDesignFonts in Material.Styles/Resources/Themes/FontFamily.axaml.

I tried creating resources with the same name in Application.Resources, but this didn't work.

<Application>
  <Application.Styles>
    <themes:MaterialTheme BaseTheme="Light" PrimaryColor="Green" SecondaryColor="Blue" />
  </Application.Styles>

  <Application.Resources>
    <FontFamily x:Key="MaterialDesignFonts">
      Microsoft Yahei, 微软雅黑,Simsun, SimHei, PingFang SC, 苹方-简, 宋体-简, 宋体, Microsoft JhengHei, Microsoft JhengHei UI, $Default
    </FontFamily>

  </Application.Resources>
</Application>

Screenshot: image

Finally, I ended up defining several styles applied to TextBlock/TextBox/AccessText, like this:

<Application >
  <Application.Resources>
    <FontFamily x:Key="MaterialDesignFonts">
      Microsoft Yahei, 微软雅黑,Simsun, SimHei, PingFang SC, 苹方-简, 宋体-简, 宋体, Microsoft JhengHei, Microsoft JhengHei UI, $Default
    </FontFamily>
  </Application.Resources>

  <Application.Styles>
    <themes:MaterialTheme BaseTheme="Light" PrimaryColor="Green" SecondaryColor="Blue" />

    <Style Selector="TextBlock">
      <Setter Property="FontFamily" Value="{StaticResource MaterialDesignFonts}" />
    </Style>
    <Style Selector="TextBox">
      <Setter Property="FontFamily" Value="{StaticResource MaterialDesignFonts}" />
    </Style>
    <Style Selector="AccessText">
      <Setter Property="FontFamily" Value="{StaticResource MaterialDesignFonts}" />
    </Style>

  </Application.Styles>

</Application>

image