Custom Font in Windows Phone 8 - xaml

I tried to add a custom font into my application. I need it for the page title. I copied the font to a folder named "Fonts" and changed the build action to Content. In the property panel the font shows up in the font list. But when i add the font the page title doesn't change. It changes a little bit but not like the font i'm using. The odd thing is when i double click on the page title the text gets highlighted in the textblock and then the highlighted text shows in the font i want. This is confusing. What should i do to correct this?
XAML for the page title
<TextBlock Text="page title" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="/AppName;component/Assets/Fonts/Dekers_Bold.ttf#Dekers_Bold" />

You have to add fonts as BlendEmbeddableFonts
Open your solution in blend, go to the font manager and in "Embedded Fonts", check your custom font.
Then create a resource called
<FontFamily
x:Key="CustomFont">/Wake Jake;component/Fonts/Fonts.zip#FontName</FontFamily>
and add it as
FontFamily="{StaticResource CustomFont}"
It will work that way.
Let me know if you need further help

If the font is located in your main WP8 project, you don't need to use the /AppName;component path. Also make sure the Dekers_Bold is actually name of the font, you should maybe try DekersBold or just Dekers:
FontFamily="/Assets/Fonts/Dekers_Bold.ttf#DekersBold"
If this is not working, try to add your font as resources first:
<FontFamily x:Key="Dekers">/Assets/Fonts/Dekers_Bold.ttf#DekersBold</FontFamily>
...
<TextBlock Text="page title" Margin="9,-7,0,0" FontFamily="{StaticResource Dekers}" />

Any Font works in windows 8, but after you add it to your project, right click on the font, choose properties and set "Build action" to "Content". Have a great day!

Unfortunately not all fonts work with Windows Phone 8. It tried your font (donwloaded from dafont) in a WP 7.1 project as described here and it works perfectly. Doing the same in a WP 8 project... the font won't load. So, you probably have to pick another font.

Related

Embedded font doesn't recognize bold

How can i reference a embbed font in my silverlight project, considering that there are multiple files for the same font?
I used the following tags in a Fonts.xaml file:
<FontFamily x:Key="MyFamily">../../Resources/Fonts/segoeui.ttf#Segoe UI</FontFamily>
In another file I have a tag to link this fontfamily to any TextBlock.
When I have a simple TextBlock it works fine:
<TextBlock Text="Simple" />
But when i want a bold text, it is not working;
<TextBlock Text="Simple" Font-Weight="Bold" />
I Know that the bold font is in another file (segoeuib.ttf), but since I refer to a specific file, and not the font name, its not finding. How can i refer to both file, without having to add FontFamily tag to all my TextBlock that needs to display Bold text?
PS: If I use the Font family name, without the file name, it will work, but if my user doesn't have the font in his/her computer it wont work.
I discovered how to do it, sharing in case someone has the same problems.
Instead of referring to the .ttf file, just put all font files in a zip and refer to the zip:
<FontFamily x:Key="MyFamily">../../Resources/Fonts/SegoeUI.zip#Segoe UI</FontFamily>

RichTextBlock, Paragraph, Hyperlink... and globalization

In Windows Phone 8.1 you can use different languages useing the property "x:Uid" of an element, if I do
<textblock x:Uid="string1"/>
and in a resource file I write
string1.Text: sentence in english
then "sentence in english" "is written" in the Text property of the textblock. For buttons would be string1.Content.
But I have a problem, I am using RichTextBlock, with a Paragraph and Hyperlink inside, I can use x:Uid but... which property to use? They don't have Text or Content property, so... how can I globalizate that elements?
Thank you.
The Paragraph and Hyperlink are collections. The actual text comes from a Run somewhere inside, and the Run has a Text property. If you set the run explicitly instead of implicitly then you can add x:Uid to its Text property:
Xaml:
<Hyperlink>
<Run x:Uid="hlink" Text="http://microsoft.com" />
</Hyperlink>
Resources.resw:
<data name="hlink.Text" xml:space="preserve">
<value>http://stackoverflow.com</value>
</data>
The displayed Hyperlink will pull the stackoverflow URL from the resource file.

Using Segoe WP Light in Windows Phone 8.1 apps

Is it possible to use Segoe WP Light in Windows Phone 8.1 applications? I would like to use the font in a pivot title, but it doesn't work. I can use SemiLight but not Light. Any ideas why?
<DataTemplate x:Key="PivotTitleTemplate">
<TextBlock
Margin="-1,0,0,0"
FontFamily="Segoe WP Light"
FontSize="20"
Text="{Binding}" />
</DataTemplate>
I have found a solution to this problem.
To use Segoe WP Light, set the font family to Segoe WP and its weight to light. To use Segoe WP SemiLight, set the font family to Sego WP SemiLight and its weight to normal.
For some reason, Visual Studio does not render the fonts properly. Sometimes, it's possible to get the fonts rendered properly if you use the properties windows to set them. However, this only works until you modify any code or switch tabs. Fortunately, on a real device, all fonts are rendered properly.

How to use ttf fonts on windows phone 7 apps development?

<TextBlock TextAlignment="Center" Text="தமிழ் எழுத்து" FontSize="60" Margin="-11,0,0,0" Foreground="#FF4D5331" FontFamily="fonts/TAU_REWN.TTF#TAU_Elango_Rewathy"/>
I have initialized my font family like above and I have pasted my ttf font in /fonts folder. This bit of code works perfectly in windows phone 8 apps development. But, not works in windows phone OS 7.1 English TTF fonts works well. Kindly note, This is a tamil font.
Whats wrong here ? Can anyone helps...
Windows Phone 7.5 has tamil font support. Here's the proof
Update with fonts
TTF Font is here : https://app.box.com/s/2ce5rvzfvfkm55d27196
TTF Font Name is here : TAU_Elango_Rewathy
Tamil text is also here: தமிழ் எழுத்து
Ensure that your font file's build action is set to "Content". Right click on the font, select properties and change the build action.
See tutorial over here that walks you through embedding a font.
Try this. TTF capitalization may solve you problem i think so.
FontFamily="fonts/TAU_REWN.ttf#TAU_Elango_Rewathy"
Put your ttf file in bellow path
/Assets/Fonts/Helvetica_.ttf
<TextBlock Name="tbSuggestionlst1" FontFamily="/Assets/Fonts/Helvetica_.ttf#Helvetica_ " Text="Hello World"/>
And Yes you have give your font name like below
<TextBlock Name="tbSuggestionlst1" FontFamily="/Assets/Fonts/Helvetica.ttf#Helvetica Bold " Text="Hello World"/>
If my ttf name is Helvetica but font name is Helvetica Bold so you have to write your font name after # like Helvetica.ttf#Helvetica Bold "
Edit: i tryed in windows phone 8 with below code and it will work fine
<TextBlock Name="tbHdrAboutsUs" Text="தமிழ் எழுத்து" FontFamily="/Assets/Fonts/TAU_REWN.TTF#TAU_Elango_Rewathy" ></TextBlock>
In windows phone 7 it will not work beacuse windows phone 7 does not supported tamil fonts
Hope it will help you.
Tamil Language support
It will work for me

Windows Store Apps: Change the icon of an AppBar Button?

I want to change the icon of an AppBar Button in my Windows Store app.
I found that the AppBar buttons have XAML markup that looks like this:
<Style x:Key="PicturesAppBarButtonStyle"
TargetType="ButtonBase"
BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId"
Value="PicturesAppBarButton"/>
<Setter Property="AutomationProperties.Name"
Value="Pictures"/>
<Setter Property="Content" Value=""/>
</Style>
What does the content value  mean? Is there any refernece to the built-in icons ?
Also how can I display a different icon of my own ?
The Content is the Unicode character number for the used font "Segoe UI Symbol" .
See a list of symbols in
LIST OF BUTTON SYMBOLS
You can use CharacterMap to pick icons other than defined in StandardStyles.xaml. The character map gives you the hex code which you can then use in button style. There are tonnes of symbols in Segoe UI Symbol.
In case of if you want to use Image or Path, then you have to re-edit some visual states in the style.
The hex value  is a symbol in the Segoe UI font. This is the symbol shown in the center of the button.
I've written a blog post on how to create your own app bar button that includes a reference of Segoe UI symbols you can use, along with their hex values.