Is it possible to use custom fonts - using font-fa

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

I was successful in using Cufón to display custom fonts on IE in WP 7.5. Typeface.js did NOT work.

Answer 2

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.

Answer 3

typeface.js works with it. Just tested it a few moments ago because I need to do the same thing. It uses canvas and vector drawings. http://typeface.neocracy.org/

Answer 4

Whenever I need custom fonts I visit http://www.fontsquirrel.com/

It's an awesome site that lets you generate font-kits out of a .ttf file including a full CSS declaration with needed hacks for browser compatibility.

I don't know if it works on Win 7 Mobile, but I think it's worth a try