Visual Studio Designer isn't displaying Embedded Font

Question

I'm using some custom fonts in my C# WPF .NET 4.0 application (Open Sans and FontAwesome, specifically) with Visual Studio 2013.

I have:

1. Added FontAwesome.otf and OpenSans-Regular.ttf to my project (not as a link) under /Fonts.
2. Made sure both fonts are set to "Resource".
3. Installed both fonts locally (Windows 8.1).
4. Created new Styles in my Resource Dictionary (that contains many other pieces, so I'm confident it's working).
5. Restarted VS2013.

Here is a snippet of the Style I've created in my Resource Dictionary:

<Style x:Key="OpenSans">
    <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Fonts/#Open Sans" />
</Style>

<Style x:Key="FontAwesome">
    <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Fonts/#FontAwesome" />
</Style>

Now, in a new User Control I created purely to test the Designer and these fonts being included properly, I have written the following XAML:

    <TextBlock Style="{StaticResource FontAwesome}" FontSize="64" Text="&#xf085;" />
    <TextBlock Style="{StaticResource OpenSans}" FontSize="48" Text="the quick brown fox jumped over the lazy dog." />
    <TextBlock FontFamily="Open Sans" FontSize="48" Text="the quick brown fox jumped over the lazy dog." />

FontAwesome works in the designer and when run, on both my PC and another PC without FoneAwesome installed.

The OpenSans Style does not display in the designer, but does when executed, including on another PC without Open Sans installed.

The Open Sans FontFamily selection displays in the designer, but does not display on another PC without Open Sans installed (expected).

Problem

I want to be able to use the Designer to see in design-time what the UI looks like given the provided Fonts I'm using. Leveraging the Styles I've created, I'm able to see the FontAwesome icons in the Designer, but not the Open Sans font. The only difference I can tell between the two is that FontAwesome is an Open-Type Font, whereas Open Sans is an True-Type Font.

Does anyone have an idea if I've overlooked something simple, or perhaps if there are obscure issues between OTF and TTF in the VS Designer?

Malave

One thing to always remember to do when you're writing applications that use custom fonts, is to not install them as a system font as well. That lets you rule out the possibility of load conflicts. So, reducing this problem: Open Sans also comes in a ttf flavour, what happens when you use that instead? Does it work? (if so, you might be using an obsolete shaping engine instead of a modern one) – Pattiepattin

@Mike'Pomax'Kamermans I am using Open Sans as a .ttf format. Some research does show that there can be problems regarding glyphs, shaping, etc., and I did research some into those issues, but they seem to be a rabbit hole. I found a solution I think is favorable and updated the question. – Malave

if the solution works, post it as answer instead of an update to the post. That will make it easier for people to discover. – Pattiepattin

Mike, are you saying it's possible that the designer won't display the font because it has multiple choices? – Keewatin

The problem seems to have fixed itself (meaning embedded fonts show up correctly in the designer). But when I copy and paste that XAML entirely into another solution with the same fonts folder, it doesn't work, even if I restart Visual Studio. Could there be some solution settings that are causing this? – Keewatin

Answer 1

Discoveries & Solution

I cannot discern why Open Sans is not rendering in the VS Designer. Every attempt I've made to coerce it to use Open Sans (from the font resource attached to the project) will fail, and the Designer falls back to the default font.

Using the same methods with FontAwesome works as expected, so there is some element to the font rendering system within VS that I can't explain.

However, I have come up a good (perhaps even better?) solution, and a tip that I didn't know about font selection in WPF:

The FontFamily Property in WPF supports fallback values, e.g.:

<Style x:Key="OpenSans">
    <Setter Property="TextElement.FontFamily" Value="Open Sans, /<project name>;component/Fonts/#Open Sans" />
</Style>

Notice that the Value of this Property is firstly "Open Sans", and then following a comma, the URI to the font that's included in the project. (As a reminder, you need to be sure the font resource is of type "Resource" under Build Action Properties (Right-click on the Font file within the Solution Explorer.))

This syntax informs WPF to use the first font listed, and if not available, to then fallback to the second font family, and so forth on down the line.

This is (potentially) a better solution, as it asks the system if the desired font (in this example, Open Sans) is already available. If so, it uses that system font, and if not, it will load the embedded font file resource.

This provides a few benefits:

• This setup causes the VS Designer to display fonts using Open Sans (in this example) where I use them, so I can design and see the font in question.

• This setup also allows machines with the fonts being used to be loaded from the system first, and if not found, then load from the resource. Perhaps a minor performance-minded item, but still beneficial.

I hope this is beneficial to others who use Open Sans (or other fonts) that for some reason will not show up in the VS Designer unless referenced directly as a system font.

Malave

It's a good solution, and worked for me in a similar situation. But I'd rather not have to install the font on my system. I'm wondering if it's a bug in Visual Studio XAML designer, where font names with spaces aren't properly handled (#32723900). – Forjudge

I too would like this problem to be solved without this workaround. And Michael, I've encountered the problem with a single-word font. – Keewatin