A complete guide to working with custom fonts in your Windows and Windows Phone app

One thing that really make an app stand out is using a special font or typeface (set of fonts in different weights and styles). It's not without reason that it's said that the font / typeface is one of the corner stones in visual indentity branding.
The Windows apps use Segoe UI and Segoe WP per default. While they are both very modern, simplistic, highly modern and current they are used by almost all apps out there. 
That alone is a reason for you to choose a custom font. No body wan'ts a product that looks just like all the others on the shelf.

A lot of wildly popular fonts such as Proxima Nova and Helvetica comes with a pretty high cost (+1,000$) for a independant developer. 
Fortunately there's free and absolutely beautiful alternatives out there!  
A great place to start is at Google Fonts. They got a lot of nice and free fonts mostly used in webdevelopment but they work perfectly in your app too. Find a typeface you like, download it and let's implement it in our app.

Implementing a custom font in Windows or Windows Phone app

1) First, you need to include the font or fonts in the project. Simply add the font to the project as a file.

 

 

 

 

2) Secondly, you need to change the build setting for the font files.
The setting should say:
Build action - Content
Copy to Output directory - Copy if newer

You can change the build settings by selecting the files, right click and say properties to see the properties panel, and change the settings.

 

 

3) Refer to the new font wherever you want to use it.
The easiest way to do that is by using the designer in Blend and Visual Studio 

You'll find your fonts which is added to the project at the very top of the items list.  If they are not there, something is wrong at you might want to fall back to the way it's done in VS2013. More about that later. 

 

4) In the code you should see one of these two in your code: 

 <TextBlock
FontFamily="ms-appx:///Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std"
FontSize="16"
 Text="Hello stranger! Thank you for visiting blendrocks" />

or this:  FontFamily="Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std"

Here's a few very important things that you need to know when working with custom fonts:

  • The font weight property should never be used. Always refer the correct font and set the weight using the file instead. 
  • If you add the font familiy to a resource dictionary you might want to reference the absolute path ms-appx:/// rather that using a relative path.
  • This part "#Helvetica Neue LT Std" is a suffix containing the Preferred Family. It's required in order for the custom font to work. The suffix has to be absolutely correct and it's case sensitive.
    • The easiest way to find it is to use a tool called dp4 font viewer. It's free and can be found downloaded here. Find your font through the program, go to the info tap copy the Preferred Family.
    • Do NOT use Windows built in font viewer as it does NOT show the correct preferred font family.

Using this technique, you should be able to use all open type and true type fonts inside your Windows and Windows Phone app.

Pro tip: To make it easier for your self, you can create a FontFamily resource inside your resource dictionary and just reference it wherever you want to use the custom font.
Your xaml could look something like this:

<FontFamily x:Key="HelveticNeueMediumFont">
Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std</FontFamily>
nd 
<TextBlock
FontFamily="{StaticResource HelveticNeueMediumFont}"
FontSize="16"
Text="Hello stranger! Thank you for visiting blendrocks" />

For Visual Studio and Blend 2013 users

Unfortunately the dropdown containing fonts doesn't work nearly as good. So you have to write it in xaml instead. But if you use the dp4 font viewer tool and you copy the xaml shown above, you should be good to go. If not please reach out to me and I'll do my best to help you.

For Windows Phone 8 developers

To implement a custom font on Windows Phone 8 you have to reference the font a bit different. You should not use ms-appx://. Instead you should write "/AssemblyNameHere;component/path".
The assemblyname is usually the same as the project. But to be sure, remember to check it by right clicking the project in the solution explore and selecting properties. In the popup you'll find the Assembly name right away. In this sample the Assembly name is AwesomeFontSample:

<TextBlock 
Text="&#xF004;"
FontFamily="/AwesomeFontSample;component/Fonts/fontawesome-webfont.ttf#FontAwesome" 
/>

You can download a Windows Phone 8 sample here.


Wrap up

Working with custom fonts is easy when working with TextBlocks  But if you want to use is through out the app you might have to modify the template of certain controls suchs a ComboBox and Buttons.
Feel free to reach out to me if you need help on implementing your custom fonts or if you have comments or feedback to the article above. 

Happy coding!

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.