wp8

How embed fonts in Windows Phone 8 using a WebBrowser control


Hello,

I hope I will be sharing some ideas from my last project. This in particular was difficult.

The problem

I have a font I want to embed into my Windows Phone Application, and I want to use in a WebBrowser Control. I have managed to embed the font and use it with standard textblocks control, however I haven’t get it working with the WebBrowser control.

The Solution

Using Data Url Scheme for embedding the font ( http://en.wikipedia.org/wiki/Data_URI_scheme ). Then let the WebBrowser control to consume the font.

First things I learned it’s that a Data Url can contains basically data (e.g.images, fonts, more files. it’s really handy). Moreover, I learned that CSS can consume this data, which makes a good option to embed the font and use it off line. There may be few bumps, such as using Base64 encoding, but one we get the rhythm it won’t hurt more.

1) In your window phone project select add the font file. Here is a remark, make sure the file format is compatible with Windows Phone (TTF files) or the Windows Phone Web Browser (WOFF). TTF may require some work to get them working , for example enabling the flag for allow the file to be embedded, or making sure that its internal file structure is compatible with WP platform.

2) When embedding the file, make sure that the file properties are set: Build Action to Content and Copy to Output Directory to Copy if newer.

3) Prepare some HTML for the setting up the font. In my project sample, I’ll be using Navigate to String method and to keep HTML code apart from my C# code, I’ll be loading an external file from the XAP package, and applying some text replacements with Regular Expressions.

4) In out sample check MainPage.xaml.cs to see how the FileManager to apply the custom font.

I haven’t tried, but I think this approach could be extended to inject a custom font to an external page. Here is the output:

Image

The code sample is at

https://github.com/hmadrigal/playground-dotnet/tree/master/MsWinPhone.EmbedFont

I hope you could find this handy,

Cheers,

Herb