javascript - Is it possible to use custom fonts - using font-face?

Question

I'm able to embed and style a font-face in a webpage to view on Android and iPhone, and it works fine. However, it will not render on Windows Phone 7.5.

I've tried embedding the font into the CSS:

@font-face {
    font-family:'MyFont';
    src: url(data:font/woff;charset=utf-8;base64,d09GR...
}

...and also provided eot / ttf files, using a declaration that works across all other browsers -

@font-face {font-family:'MyFont';src:url('../fonts/MyFont-webfont.eot');src:url('../fonts/MyFont-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/MyFont-webfont.svg#MyFontRegular') format('svg'), url('../fonts/MyFont-webfont.woff')format('woff'), url('../fonts/MyFont-webfont.ttf') format('truetype');font-weight:normal;font-style:normal;}

...but still no luck. I can't believe that the new Windows phones do not allow for font embedding, and only support a limited list of fonts, as mentioned in:

http://msdn.microsoft.com/en-us/library/hh202920%28v=vs.92%29.aspx

Even if it's a Javascript rendering solution, any insight / hints or tips would be great...there must be some kind of workaround!

Answer 1

According to this blog post it's one of the "17 differences" between IE9 and IE9 on WP7.
And here's the MSDN article which officially confirms it.