Customized Font in Windows Phone 8

Introduction

What if I ask you to prepare a great UI for Windows Phone?

Then, you really think of attractive page layouts, create mockups, arrange needed icons and decide which font to use.

Yes, the font is an important issue if you really want a great User Interface. Since Windows Phone never bothers with fonts because of its simplicity and elegance. Even though we can use our own customized fonts apart from the default Windows Phone fonts.

Requites

We hardly need any external requites for any demonstration, but in this we need an extra font file.

Procedure

Step 1

First, add your custom font in your Solution Explorer.

custom font in Solution Explorer

After selection of your custom font, go to the Properties window.

Properties window

Make the Build action to Content always if you really want to implement on a Windows Phone device.

Without this change, your app will not render as expected.

Step 2

Now, add a Text Block on the Control Panel. Which looks something like:

text block

  1. <TextBlock HorizontalAlignment="Left" Margin="75,74,0,0"  
  2. TextWrapping="Wrap" Text="C# Corner" VerticalAlignment="Top"  
  3. FontSize="72"/>  
Now, add a Font Family Attribute within this and its value would be like:

FontFamily=".\BebasNeue.otf#Bebas Neue"

It’s something uncommon, because we have never done it like this.

Since the value has been divided into two parts along with # which acts as a separator.
  • .\ points to the ROOT solution folder.
  • BebasNeue.otf points to the physical name in Solution Explorer.
  • And, Bebas Neue is the actual name of the font.

    Bebas Neue font

And when you have done it correctly you may have something like this.

output of Customized Font

Conclusion

It doesn’t require any programming skills to add a custom font to your app. With this, you can add a Hindi font as well or any desired font. For further reference I have attached my solution file.

Up Next
    Ebook Download
    View all
    Learn
    View all