9

I'm building a Windows Phone 8 HTML5 app that shows an external website on the web. When the page loads, it shows all the content along with the correct css styling except for the web font. The web font is not included in the project, it is run from the website online. Also, I know javascript is running because other javascripts are working on the page. Does anyone know a solution to get web fonts working inside apps? If it helps, when I direct the main web browser in Windows Phone 8 to the webpage in question, the webfonts load fine.

Kara
  • 6,115
  • 16
  • 50
  • 57
Austin Spaeth
  • 147
  • 1
  • 7

1 Answers1

26

Custom fonts can be used in Windows Phone 8 HTML5 apps in the same way as they are used on websites and other mobile platforms' webviews. There are two things to watch out for,

  1. Within Visual Studio make sure that the font's Properties>Advanced>Build Action is set to "Content" so it is copied to the device when the project is built and deployed.
  2. Make sure that the font you are using is licensed for embedding and that the embeddable flag in the truetype font is set to 0 to allow embedding. iOS and Android ignore this embeddable tag but IE10 respects it.

You can inspect the embeddable flag of any truetype font using the open-source TTFEdit. You can make a font embeddable by changing the value in View>Show>Advanced>Legal rights for embedding to 0 and re-saving it. Only change the flag if the font is licensed for embedding.

I've tested with a number of truetype fonts with no problem. My only issue so far has been when including the font-awesome library where the src: values in font-awesome.min.css needed changing to fix a bug in IE10 mobile. When using font-awesome,

src:url('../fonts/fontawesome-webfont.ttf?v=4.0.3') won't work. src:url('../fonts/fontawesome-webfont.ttf') will.

Sample project with four embedded fonts on Lumia 920 (tested on Amber and Black updates)

thomasforth
  • 665
  • 7
  • 13
  • Further testing confirms that this works but only on WP8 devices with GDR2 or better. That means the Lumia Amber or Lumia Black update or better for Nokia devices. – thomasforth Feb 12 '14 at 15:05
  • This is the right answer. I created a repo with a sample app based on @thomasf2811 solution: https://github.com/gabrielmaldi/windows-phone-8-local-font-face – gabrielmaldi Mar 03 '14 at 23:36
  • 5
    Thank you very much. I struggled with this in my Cordova project, until I came over your solution here, which worked :) – Svein Erik Aug 20 '14 at 10:49
  • 1
    This solution works perfectly. Thank you for sharing! Additional problem you could have is the CSS path to the TTF, it *must* be a relative path and not an absolute path. – Deathspike Feb 17 '15 at 09:30