Include Fonts in WPF Application

Question

Ok so everything I've been trying is not loading my fonts correctly, I've added them to the .csproj file which was done by switching copy to output directory so this is what it looks like

<Resource Include="Resources\Fonts\SourceSansPro-Black.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-BlackItalic.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-Bold.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-BoldItalic.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-ExtraLight.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-ExtraLightItalic.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-Italic.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-Light.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-LightItalic.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-Regular.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-SemiBold.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>
    <Resource Include="Resources\Fonts\SourceSansPro-SemiBoldItalic.ttf">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Resource>

Then I've added the references inside my ui-dictionary which looks like

    <FontFamily x:Key="Black" >pack://application:,,,/Resources/Fonts/#SourceSansPro-Black</FontFamily>
    <FontFamily x:Key="BlackItalic" >pack://application:,,,/Resources/Fonts/#SourceSansPro-BlackItalic</FontFamily>
    <FontFamily x:Key="Bold" >pack://application:,,,/Resources/Fonts/#SourceSansPro-Bold</FontFamily>
    <FontFamily x:Key="BoldItalic" >pack://application:,,,/Resources/Fonts/#SourceSansPro-BoldItalic</FontFamily>
    <FontFamily x:Key="ExtraLight" >pack://application:,,,/Resources/Fonts/#SourceSansPro-ExtraLight</FontFamily>
    <FontFamily x:Key="ExtraLightItalic" >pack://application:,,,/Resources/Fonts/#SourceSansPro-ExtraLightItalic</FontFamily>
    <FontFamily x:Key="Italic" >pack://application:,,,/Resources/Fonts/#SourceSansPro-Italic</FontFamily>
    <FontFamily x:Key="Light" >pack://application:,,,/Resources/Fonts/SourceSansPro-Light.ttf</FontFamily>
    <FontFamily x:Key="LightItalic" >pack://application:,,,/Resources/Fonts/#SourceSansPro-LightItalic</FontFamily>
    <FontFamily x:Key="Regular" >pack://application:,,,/Resources/Fonts/#SourceSansPro-Regular</FontFamily>
    <FontFamily x:Key="SemiBold" >pack://application:,,,/Resources/Fonts/#SourceSansPro-SemiBold</FontFamily>
    <FontFamily x:Key="SemiBoldItalic" >pack://application:,,,/Resources/Fonts/#SourceSansPro-SemiBoldItalic</FontFamily>

But everytime I've tried to use it fonts do not load. So I've tried different methods in the uri

<!-- First Method -->
    <FontFamily x:Key="Light" >pack://application:,,,/Resources/Fonts/SourceSansPro-Light.ttf#SourceSansPro-Light</FontFamily>

<!-- Second Method -->
<FontFamily x:Key="Light" >pack://application:,,,/Resources/Fonts/#SourceSansPro-Light</FontFamily>

<!-- Third Method -->
<FontFamily x:Key="Light" >/Resources/Fonts/#SourceSansPro-Light</FontFamily>

<!-- Third Method -->
<FontFamily x:Key="Light" >/Resources/Fonts/#SourceSansPro-Light</FontFamily>

<!-- Fourth Method -->
<FontFamily x:Key="Light" >/Resources/Fonts/SourceSansPro-Light.ttf#SourceSansPro-Light</FontFamily>

Am I missing something here?

Have You tried to set up properties on font -> Build Action = Resource ? — Kuba Do, Nov 07 '19 at 12:06
Take a look at [this SO question](https://stackoverflow.com/questions/6453640/how-to-include-external-font-in-wpf-application-without-installing-it). — Alessandro D'Andria, Nov 07 '19 at 12:15
@AlessandroD'Andria I tried that and getting a exception error `Unable to cast object of type 'System.Windows.Style' to type 'System.Windows.Media.FontFamily` — EasyBB, Nov 07 '19 at 12:20
Can You check this link please -> [WPF fonts](https://wpf.2000things.com/tag/embedding-fonts/) meaby some step is missing, and FYI name of font "#SourceSansPro-Black" is a name when You open the font in external program (Name from title bar) not name of file, please check it also — Kuba Do, Nov 07 '19 at 12:25
I figured it out, I had to go to Windows->Fonts and copy the font name exactly, not the filename. So `#SourceSansPro-Light` should be `Source Sans Pro Light` — EasyBB, Nov 07 '19 at 12:31

score 6 · Accepted Answer · answered Nov 07 '19 at 15:57

Embedding fonts in WPF as resources, is pretty simple. However, there are few gotchas that you need to be aware of.

Here is a step by step process that I followed in a sample app:

Added Resources/Fonts folders to my project

Dragged the Source Sans Pro .ttf files into the Fonts folder

Visual Studio automatically set their Build Action to Resource

Note: You don't need to copy them to the output directory if they are being used as resources

Created a Fonts.xaml ResourceDictionary with the following code

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <FontFamily x:Key="Regular">pack://application:,,,/WpfApp4;component/Resources/Fonts/#Source Sans Pro</FontFamily>
    <FontFamily x:Key="Black">pack://application:,,,/WpfApp4;component/Resources/Fonts/#Source Sans Pro Black</FontFamily>

</ResourceDictionary>

Then I merged in the Fonts.xaml resources into my App.xaml file.

<Application x:Class="WpfApp4.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Fonts.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

The first problem you have is an incorrect Pack Uri format.

pack://application:,,,/YourAppNamespace;component/Resources/Fonts/#Font Family Name

The second problem you have is an incorrect font family name

The font family name is usually not the same as the .ttf file name!

To get the right family name, I highly recommend using the dp4 Font Viewer.

I hope this helps!

Hey thanks for the answer, I've never used `;component` what is that exactly? In terms of the URI format. Is that just saying that it's a component? — EasyBB, Nov 08 '19 at 02:06
`;component` is helpful when you're dealing with an external resources assembly. However, I have found that using it all the time solves a lot of resource resolution issues I run into. — Keithernet, Nov 11 '19 at 18:08
@Keithernet you never showed your final, working implementation or even how to do it. You show how to implement the resource dictionary, but provided no XAML or Code-Behind on how to use it. Could you edit your answer to elaborate this possibly? Showing a working implementation in the end of your answer would be the icing this cake needs. — DeeJayh, Aug 23 '20 at 23:10

Include Fonts in WPF Application

1 Answers1