Installing custom fonts in a C#/WinUI 3 application

Question

please help me understand how custom fonts are installed in a desktop application on WinUI 3.

I used the following installation method:

1. Defined font resources in App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
        </ResourceDictionary.MergedDictionaries>
        <FontFamily x:Key="AmoreizaBoldFont">/Sources/Fonts/Amoreiza Bold.ttf#Amoreiza</FontFamily>
        <FontFamily x:Key="AmoreizaRegularFont">/Sources/Fonts/Amoreiza.ttf#Amoreiza</FontFamily>
        <FontFamily x:Key="RobotoFont">/Sources/Fonts/Roboto-Regular.ttf#Roboto</FontFamily>
        <FontFamily x:Key="HellowinsFont">/Sources/Fonts/Hellowins.ttf#Hellowins</FontFamily>
        <FontFamily x:Key="YuGothicMediumFont">/Sources/Fonts/YuGothM.ttc#Yu Gothic</FontFamily>
    </ResourceDictionary>
</Application.Resources>

2. Then in MainWindow.xaml I use these resources <TextBlock FontFamily="{StaticResource HellowinsFont}" Text="Title"/>

And specifically in this given example, everything works. But the problem is that I absolutely do not understand how and why it works. I have been trying for a very, very, very long time to find a font name that comes after the # symbol. It's kind of a guessing game. I tried to use applications that allow you to see more detailed properties of fonts, and more specifically, I used the dp4 Font Viewer application, but it did not help me either. In some cases, this name is completely non-obvious and does not appear in this program. The question is, how am I supposed to know this name? There must be a way not to run into the guessing game.

Second question. As a result of my tests, I realized that changing the name of the font file leads to the fact that the font does not work again. Naturally, provided that all paths/names have also been updated. Even with the correct #FontName. Why is this happening? How is the file name tied here?

And the third question. Suppose I miraculously made the previous code work, but as soon as I tried to add more fonts:

<FontFamily x:Key="Font1">/Sources/Fonts/Raleway-Italic-VariableFont_wght.ttf#Raleway</FontFamily>
<FontFamily x:Key="Font2">/Sources/Fonts/Raleway-VariableFont_wght.ttf#Raleway</FontFamily>

I got nothing again. These fonts were downloaded from Google Fonts. The file names have not changed. #FontName I have already tried a bunch of different ones, but I could not find anything. I used dp4 Font Viewer, but it didn't help me either.

Please explain what I'm doing wrong :(

Answer 1

how am I supposed to know this name? There must be a way not to run into the guessing game.

This link might help. Usually, it's the Title property without the Font Style like Regular or Bold (if any). You can see the Title by right-clicking the *.ttf file and select Properties, then Details.

Second question. As a result of my tests, I realized that changing the name of the font file leads to the fact that the font does not work again. Naturally, provided that all paths/names have also been updated. Even with the correct #FontName. Why is this happening? How is the file name tied here?

You can change the *.ttf file name using the file explorer. My first guess is that you are changing the file name in the file explorer but not in the Visual Studio's Solution Explorer.

And the third question. Suppose I miraculously made the previous code work, but as soon as I tried to add more fonts: I got nothing again.

Make sure that the new *.ttf file's Build Action is set as Content.