How To Embed Custom Fonts In Windows Store Apps

There is a competition now-a-days in App Development. The most eye catching attribute in App is "Graphic". Better the Graphic in any App, higher number of user's will prefer it. I love Bill Gates Quotes and mostly follow them. One of my favorite quote of Bill Gates is:

"If you can't make it good, at least make it look good - Bill Gates"

Now, If you analyse the quote, you may conclude that product must at-least look good or awesome. Use of "custom font" can't only make a good product but also make it look good.

How to load custom font and use it in Windows Store App:

Output of Our Result Would Be:

Now Step By Step Guide-How To Add Custom Font in Windows Store App:
1. First of All, Developer Must Have True Type Font(.ttf) saved.

2. Create/Open Windows Store App Project
3. Open "Solution Explorer" from Project ---OR--- press "Ctrl+Alt+L" ---OR--- From View Menu-> Select "Solution Explorer".

4. In Solution Explorer --- Right Click on "Assets" Folder. Choose "Existing Item" suboption from "Add" option as shown in figure:

5. Then Locate and Selected required font to be embedded i.e.

6. When you will add items... It will be listed in Assets Folder. (Note: Don't Change Font Name, It may cause problem)

7. Now Add Some TextBlock or TextBox to MainPage.xaml i.e:

<Grid Background="#FFC4F5A1">

        <TextBlock HorizontalAlignment="Left" FontFamily="Assets/AVidaNova.ttf#AVidaNova" FontSize="90" Foreground="Black" Margin="154,64,0,0" TextWrapping="Wrap" Text="Importing Fonts" VerticalAlignment="Top" Height="102" Width="818" FontWeight="Bold"/>

        <TextBlock HorizontalAlignment="Left" FontFamily="Assets/adler.ttf#adler" FontSize="100" Foreground="Black" Margin="154,545,0,0" TextWrapping="Wrap" Text="Importing Fonts" VerticalAlignment="Top" Height="143" Width="1154" FontWeight="Bold"/>

        <TextBlock HorizontalAlignment="Left" FontFamily="Assets/chiller.ttf#chiller" FontSize="90" Foreground="Black" Margin="154,427,0,0" TextWrapping="Wrap" Text="Importing Fonts" VerticalAlignment="Top" Height="113" Width="1091" FontWeight="Bold"/>

        <TextBlock HorizontalAlignment="Left" FontFamily="Assets/a Theme for murder.ttf#a Theme for murder" FontSize="140" Foreground="Black" Margin="154,271,0,0" TextWrapping="Wrap" Text="Importing Fonts" VerticalAlignment="Top" Height="151" Width="871" FontWeight="Bold"/>

        <TextBlock HorizontalAlignment="Left" FontFamily="Assets/catman.ttf#catman" FontSize="100" Foreground="Black" Margin="154,171,0,0" TextWrapping="Wrap" Text="Importing Fonts" VerticalAlignment="Top" Height="95" Width="920" FontWeight="Bold"/>

    </Grid>

8. Our Focus will be on line:

FontFamily="Assets/File_Name_With_Extension#File_Name

where FontFamily is Attribute of Following Tag, Assets is folder in our project contain data related to Project. Let Suppose We Want to include file "AVidaNova" with extension ".ttf" such that.

           File_Name_With_Extension = AVidaNova.ttf

           File_Name = AVidaNova

Then Our Attribute of TextBlock tag will become:

<TextBlock FontFamily="FontFamily="Assets/AVidaNova.ttf#AVidaNova" />

Thus... Try to Build/Run the app. I hope you will like style of fonts.

Note: Sometimes People Save font files in Control Panel->Font. This work fine on developer PC but when you publish it on Windows Store... Graphic may/may not be same as you expected. Thus try to add files to Assets.

I hope that you will like my article. Please feel free to give your valuable comments and feedback here.