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:
Added FontAwesome.otf and OpenSans-Regular.ttf to my project (not as a link) under /Fonts.
Made sure both fonts are set to "Resource".
Installed both fonts locally (Windows 8.1).
Created new Styles in my Resource Dictionary (that contains many other pieces, so I'm confident it's working).
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="" />
<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?
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.
Related
So i wanted to use a costum font on my uwp app, i download the font from google fonts then added to the folder Fonts the file as been set as content and the file gets copied on the output directory everytime which i guess is the app package?
<StackPanel>
<TextBlock Text="Cantami Diva" FontSize="72"/>
<TextBlock Text="Cantami Diva" FontSize="72" FontFamily="ms-appx:///Assets/Fonts/Arvo-Regular.tff#Arvo"/>
</StackPanel>
here is the problem, the second textblock where the font is applied is getting displayed the same as the first, i guess it cant find the font, but if i install the font on my computer it works perfectly, is there no way to use the font without having the user to install it?
The True Type Font extension is .TTF not .TFF
I did a quick test and after changing the typo you had it worked fine for me.
<StackPanel>
<TextBlock Text="Cantami Diva" FontSize="24"/>
<TextBlock Text="Cantami Diva" FontSize="24" FontFamily="ms-appx:///Assets/Fonts/Arvo-Regular.ttf#Arvo"/>
</StackPanel>
I would like to import custom fonts on my WPF application so that they work without having the client to install them.
All the answers I have found so far are in XAML, I would like to do it only in C#.
My fonts are in Resources/Fonts/.
I have already tried this :
Fonts.GetFontFamilies(new Uri("pack://application:,,,/Resources/Fonts/#"));
But it didn't work.
I did everything bluetoothfx said but it still did not work.
Then I changed the Build action of my fonts (it was to Content), to Embedded Resource, and it worked. Resource works also for me.
Thanks anyway.
I think the way that you are working will not work.
At first create a folder name fonts then Add the font to your project, change its Build Action to Content.
Now you need to find the internal name (Real name) of the font not the font-file name. You can have it by opening the font file and you can see it on top.
Now edit App.xaml
<Application.resources>
<style x:key="MYFONT_INTERNAL_NAME">
<setter property="TextElement.FontFamily"
value="pack://application:,,,/fonts/#MYFONT_INTERNAL_NAME" />
</style>
Now use it in your code like:
<TextBlock Style="{StaticResource MYFONT_INTERNAL_NAME}" FontSize="16" Text="Font Style" />
To know more search here:
http://www.alteridem.net/2014/02/24/custom-fonts-in-wpf-applications/
I tried to add google font to my silverlight project. so i downloaded the zip and added the fonts to Fonts folder:
I tried to load it like this:
<controls:DynamicTextBlock Grid.Column="2"
Width="200"
HorizontalAlignment="Left"
FontSize="{StaticResource FontSize6}"
FontFamily="/EZTrader;Component/Fonts/#RobotoLight"
Foreground="White"
Text="{Binding UserFullName}"
ToolTipService.ToolTip="{Binding UserFullName}" />
and nothing happened.
what should i do to fix this?
thanks!
If you are using windows, Open the font you want to use with Windows Font Viewer
Check the Font name:. That name is what you will use when referencing it. Note: the font name may not always match the filename of the .ttf and can also include spaces.
You want to make sure that the `Build Action' of the included file in the project is set to Resource as you want to be able to reference it from xaml.
You can create a static resource for the FontFamily in your App.xaml so you can reference it throughout your project.
Assuming the name of the assembly for your project is EzTrader.dll
<FontFamily x:Key="RobotoLightFontFamily">/EzTrader;component/Fonts/RobotoLight.ttf#[Font name here]</FontFamily>
<FontFamily x:Key="RobotoThinFontFamily">/EzTrader;component/Fonts/Roboto-Thin.ttf#[Font name here]</FontFamily>
<!-- other font resources -->
Then build the project.
From there you should be able to reference it like so
<controls:DynamicTextBlock Grid.Column="2"
Width="200"
HorizontalAlignment="Left"
FontSize="{StaticResource FontSize6}"
FontFamily="{StaticResource RobotoLightFontFamily}"
Foreground="White"
Text="{Binding UserFullName}"
ToolTipService.ToolTip="{Binding UserFullName}" />
Reference:
How to use your own fonts within Silverlight
Using Custom Fonts in Silverlight
Using built-in, embedded and streamed fonts in Silverlight
If you can, check what the display name of the font is, instead of the file name for the part after the #. It may actually be Roboto Light.
<controls:DynamicTextBlock FontFamily="/EZTrader;component/Fonts/RobotoLight.ttf#Roboto Light" />
You may also need to change the build properties on your font file as seen here: http://geekswithblogs.net/mamta_m/archive/2010/07/01/adding-custom-fonts-to-your-silverlight-application.aspx.
Any one knows how to show the slider tool tip on Windows Phone 8.1 WinRT? I have checked the property IsThumbToolTipEnabled but no tool tip is shown. I couldn't find any resources on how to do this on phone. Any clue?
Set a custom template and use the tooltipservice api.
First, edit the style for a slider. Next find the <Thumb> Element. This code will work and show the text, and you can use binding for the text value.
<Thumb>
<ToolTipService.ToolTip>
<TextBlock Text="Your text"/>
</ToolTipService.ToolTip>
</Thumb>
I had created a User Control in my main Project Originally. I have now created a new Project that uses the WPF User Control Library Template and moved my control there.
The issue I am having, is my control uses images as the content for buttons. I have moved the images along with the controls into the new project, but I cannot get the Pack URIs to work. The Control and the images both reside in the same folder of the project called MyControl an the new Project name is MyControls.
I have tried:
<Button Name="Button1" ToolTip="Button1" Click="Button1Action">
<Image Source="pack://application:,,,/MyControl/image1.png" />
</Button>
and
<Button Name="Button1" ToolTip="Button1" Click="Button1Action">
<Image Source="pack://application:,,,MyControls;/MyControl/image1.png" />
</Button>
I also tried adding the images to the Resources.resx file, then in the Code Behind converting that to a BitmapSource, creating an Image control, setting its source to the BitmapSource, and then setting the Button.Content to the Image. I assume that since the png has a transparent background, it was messed up in the process, it was displayed with a black background using this method.
The Build Action for the Image in the project is set to Resource, so I assume I am just missing the correct Pack string.
Your second pack uri was close, but you missed one word (and a slash)! It should be
<Image Source="pack://application:,,,/MyControls;component/MyControl/image1.png" />