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?

Zapateado

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.

Embattled

For me, the key part of this was that most examples leave off the TTF file name, which is fine if your different font files don't share the same internal name. – Docilla

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

Zoi

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.

Marlomarlon

Answer 4

You can do this without using any "Run".

<TextBlock x:Name="UserInstructionsContent" Margin="0,30,0,0" FontFamily="Bahnschrift Light, Segoe MDL2 Assets" FontSize="24" Text="Hello &#x1F30E;">

XAML Output  :     Hello 🌎

Came