EasyBB
EasyBB

Reputation: 6544

Include Fonts in WPF Application

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?

Upvotes: 0

Views: 5184

Answers (1)

Keithernet
Keithernet

Reputation: 2509

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!

Upvotes: 6

Related Questions