WebBrowser custom font in Windows Phone 8

Question

I am new to Windows Phone 8 application and i am developing an application to load custom font in Web Browser. Here i have saved my HTML in Isolated storage and added my font in Assets folder of Application. Now i am loading the HTML , In that HTML font is set as .

@font-face {
    font-family:'FontName';
    src: local(your_font), url('fonts/bttf.ttf') format('opentype');
}

But it is not showing correctly. Please help me.

Possible duplicate of [how to apply custom font to web browser content WP7](http://stackoverflow.com/questions/14119852/how-to-apply-custom-font-to-web-browser-content-wp7) — Zin Min, Oct 22 '16 at 13:09

score 2 · Answer 1 · edited May 23 '17 at 12:18

If we want to use local custom fonts in WebBrowser control, it turns out to be much more complicated than XAML. Referring 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 is based on if the conditions listed below are matched,

Windows Phone 8 device should be GDR2 or greater
Font file’s Build Action property must be Content
Font file’s embeddable flag must be set to 0

There is also a good sample that built a project. 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:

@font-face {
font-family: 'ALGER';
src: url('ALGER.ttf') format('truetype'), url('Fonts/ALGER.ttf') format('truetype');
}
p {
font-family: 'ALGER';
font-size: 18px;
}

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.

Hope this helps. Thanks and cheers.

I tried this but no luck for me. Any way thanks for the reply. — pranavjayadev, Jun 05 '14 at 10:05
@PranavJDev: Can we have some chat on Stackoverflow I want to discuss one problem — Arslan Pervaiz, Mar 10 '16 at 13:56

score 1 · Answer 2 · edited May 23 '17 at 10:32

The only reliable way I have found to load fonts in the WebBrowser control on Windows Phone is to avoid loading them as a file.

Instead of using:

@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff?v=1.1") format("woff");
}

we use:

@font-face {
  font-family: "MyFont";
  src:url(data:application/x-font-woff;base64,xxPUT_BASE64_WOFF_DATA_HERExx) format("woff");
}

In javascript we create a style tag, put the CSS into the style tag, and append the style tag to the head. Helper function (I edited to make it plain JavaScript - I think correct):

function insertStyle(cssText) {
    var styleElement = document.createElement('style');
    styleElement.setAttribute('type', 'text/css');
    styleElement.setAttribute('rel', 'stylesheet');
    if (styleElement.styleSheet) {   // IE11 IE docMode < 11
        styleElement.styleSheet.cssText = cssText || '';
    } else {
        styleElement.appendChild(document.createTextNode(cssText || ''));
    }
    (document.head || document.getElementsByTagName('head')[0]).appendChild(styleElement);
}

I think that this is a nasty workaround, but it works (even in GDR2), and is easy to implement if you have a good build pipeline.

Note that we use this for iOS and Android too (we don't support Android 2.x). It seems to be a fairly robust solution.

For use with an html app (Ajax) served over the internet it has the great advantage that we can reliably detect if a javascript file has loaded and run correctly, whereas detecting if a CSS file (or font-face) has failed to fetch is very hard to do cleanly (cross-browser and backwards compatibly).

Also note, we use woff format for maximum backwards compatibility. There are lots of ttf to woff converters you can use. We don't need other formats because this code doesn't happen to be used by desktop browsers, and we don't support some obsolete devices.

Edit: If you want to use code to detect <= GDR1, you can use: https://stackoverflow.com/a/32431077/436776

WebBrowser custom font in Windows Phone 8

2 Answers2