How to Use Custom Font in Windows Phone 8 Application

When building a Windows Phone app, it’s quite common that we’d like to change the font style of a TextBlock, TextBox and etc. By default, Windows Phone 8 supports fonts for the majority of the writing systems of the world, there are many font families nested in Windows Phone OS, we could take a reference at Font and language configuration support for Windows Phone.

However, we might still want to use our custom font family for our applications, either in XAML or HTML, to make our applications more pleasing and beautiful. Also, our applications could be more user-friendly if user could decide which font to be downloaded and used. I will introduce how to use custom fonts in Windows Phone 8 Applications to:

1) Change font family at runtime for a XAML control by C#

2) Display a local HTML page for Web Browser control

Change font family at runtime

Introduced as MSDN library, Text and fonts for Windows Phone, Windows Phone support TTF file and stream-based zip file,

“The font that you specify may not necessarily be the font that Windows Phone uses. Windows Phone chooses the font from the supported local fonts, from the fonts provided in a packaged file referenced in the FontFamily property, or from the stream-based zip or .ttf file passed to the FontSource property. “

If located in application package, there are 2 options to use custom font files, FontFamily property and FontSource property. Below is a sample for FontFamily property, FontSource will be introduced later:

    1: text.FontFamily = new FontFamily(@"\Assets\Fonts\ALGER.TTF#Algerian");

FontFamily constructor requires a family name string, and it should be at the format of: Path\[File Name]#[Font Name] . Font name could be find in the first line of a TTF file.  And one most import step before run the application is, we must set the Build Action property of a TTF file to Content:

Another situation is, we might want the TTF files to be downloaded by users instead of published within the package. But after font files to be downloaded to app’s isolated storage, we would need to read the font file to stream and pass it to FontSource. FontFamily does not work for local stored font files. See code below:

    1: using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())
    2: {
    3:     IsolatedStorageFileStream stream = new IsolatedStorageFileStream(filename, System.IO.FileMode.Open, storage);
    4:  
    5:     text.FontSource = new System.Windows.Documents.FontSource(stream);
    6:     text.FontFamily = new FontFamily(fontname);
    7: }

Filename here shall be the full path name in isolated storage.

Use local custom font in WebBrowser Control

If we want to use local custom fonts in WebBrowser control, it turns out to be much more complicated than XAML. Refering to an online TTF file works fine, on the contrary for local files.

I used to believe that it is impossible for Windows Phone application to use a local custom font in WebBrowser, until I read this StackOverflow post: Getting a web-font to work on an HTML5 Windows Phone App? Solution provided by Thomas Forth based on if the conditions listed below are matched,

1. Windows Phone 8 device should be  GDR2 or greater

2. Font file’s Build Action property must be Content

3. Font file’s embeddable flag must be set to 0

For more detail about embeddable flag, Wikipedia has a good explanation, as mentioned by Tomas Forth, there is an open-source TTFEdit could be used to change embeddable flag: View>Show>Advanced>Legal rights for embedding. But keep in mind that, such change has potential copyright issues.

There is also a good sample created by Gabriel, that built a project using Font Awesome: A barebones example of using CSS3 @font-face with embedded fonts in Windows Phone 8.

After the most difficult part is solved, it becomes quite easy to browser local HTML with local custom font, see sample below:

    1: @font-face {
    2:     font-family: 'ALGER';
    3:     src: url('ALGER.ttf') format('truetype'), url('Fonts/ALGER.ttf') format('truetype');
    4: }
    5:  
    6: p {
    7:     font-family: 'ALGER';
    8:     font-size: 18px;
    9: }

Such CSS works for the HTML and font files located in either application package or isolated storage.

Last but not least, the local HTML file must have the HTML doctype declaration, as @font-face is only support in CSS2 or CSS3, no mather whether the declaration is HTML 4.01 or HTML 5, we just have to use one.

- Jazzen