WPF multiple Font files of the same family

Question

I have the following font files.

MyFont-Regular.tff

MyFont-Bold.tff

MyFont-Italic.tff

How do I use them?

I can do the following,

<TextBlock 
FontFamily="/Fonts/MyFont/MyFont-Regular.ttf#My Font"
Text="This is my font"/>

By what if i wan't to use styles like italic and bold? Can't i declare that My Font consists of several files each containing the fonts style?

Answer 1

You cannot. You can, however, wrap your custom font into a style/resource:

<App.Resources>
    <FontFamily x:Key="CustomRegular">/Fonts/MyFont/MyFont-Regular.ttf#My Font</FontFamily>
    <FontFamily x:Key="CustomBold">/Fonts/MyFont/MyFont-Bold.ttf#My Font</FontFamily>
    <FontFamily x:Key="CustomItalic">/Fonts/MyFont/MyFont-Italic.ttf#My Font</FontFamily>
</App.Resources>

Then use it like this:

<TextBlock FontFamily="{StaticResource CustomItalic}">Hello world</TextBlock>

Need part of the text italic?

<TextBlock FontFamily="{StaticResource CustomRegular}">
    <Run FontFamily="{StaticResource CustomItalic}">Hello</Run>
    <Run>World</Run>
</TextBlock>

Best of luck.

Answer 2

Here is a better way of doing it:

1. Add a /Fonts folder to your solution.
2. Add the True Type Fonts (*.ttf) files to that order
3. Include the files to the project
4. Select the fonts and add them to the solution

5. Set BuildAction: Resource and Copy To Output Directory: Do not copy. Your .csproj file should now should have a section like this one:

    <ItemGroup>
     <Resource Include="Fonts\NotoSans-Bold.ttf" />
     <Resource Include="Fonts\NotoSans-BoldItalic.ttf" />
     <Resource Include="Fonts\NotoSans-Italic.ttf" />
     <Resource Include="Fonts\NotoSans-Regular.ttf" />
     <Resource Include="Fonts\NotoSansSymbols-Regular.ttf" />
   </ItemGroup>
   

6. In App.xaml add <FontFamily> Resources. It should look like in the following code sample. Note that the URI doesn't contain the filename when packing with the application.

   <Applicaton ...>
   <Application.Resources>
       <FontFamily x:Key="NotoSans">pack://application:,,,/Fonts/#NotoSans</FontFamily>
       <FontFamily x:Key="NotoSansSymbols">pack://application:,,,/Fonts/#NotoSansSymbols</FontFamily>
   </Application.Resources>
   </Application>
   

7. Apply your Fonts like this:

   <TextBlock x:Name="myTextBlock" Text="foobar" FontFamily="{StaticResource NotoSans}" 
              FontSize="10.0" FontStyle="Normal" FontWeight="Regular" />
   

8. You can also set the font imperatively:

   var uri = new Uri("pack://application:,,,/");
   myTextBlock.FontFamily = new FontFamily(uri, "./Fonts/#NotoSans");
   

References

• MSDN: Packaging Fonts with Applications

Answer 3

This actually is possible! Instead of specifying FontFamily="/Fonts/MyFont/MyFont-Regular.ttf#My Font" you should rather specify only the folder with your font files and the name of the font:

FontFamily="/Fonts/MyFont/#My Font"

WPF then inspects all font files in that directory and loads them into one FontFamily if the font name matches the name specified after the #.

This way you can easily define one FontFamily in your resources and use its styles by specifying the properties FontWeight and FontStyle:

<FontFamily x:Key="MyFont">/Fonts/MyFont/#My Font</FontFamily>

<!-- somewhere else: -->
<TextBlock
    Text="Hello World"
    FontFamily="{StaticResource MyFont}"
    FontWeight="Bold"/>

This will automatically use your TTF files from that folder.