Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visual Studio Designer isn't displaying Embedded Font

Tags:

c#

.net

wpf

fonts

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?

like image 821
Justin Shidell Avatar asked Apr 13 '15 21:04

Justin Shidell


1 Answers

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.

like image 87
Justin Shidell Avatar answered Oct 13 '22 21:10

Justin Shidell