@font-face doesn't work on windows phone 8

Question

I use some @font-face for my website,some fonts and some icon-font. Icon-font is working well, on desktop and mobile devices but the fonts (not icon-font) is not working on Windows Phone 8. what's the problem?

Answer 1

1. Download your font from here (@font-face web type)

2. Copy your font file (extension: eot,woff,ttf,svg) to your destination path

3. Update CSS Style (base on relative font path)

   @font-face {
       font-family:"B Yekan";src:url("fonts/Body/BYekan.eot?") format("eot"),url("fonts/Body/BYekan.woff") format("woff"),url("fonts/Body/BYekan.ttf") format("truetype"),url("fonts/Body/BYekan.svg#BYekan") format("svg");
       font-weight:normal;
       font-style:normal;
   }
   

Answer 2

Your font family doesn't match your src, that might be why?

try:

@font-face {
   font-family: 'B Yekan';
   src: url('fonts/Body/BYekan.eot?') format('eot'), 
   url('fonts/Body/BYekan.woff') format('woff'), 
   url('fonts/Body/BYekan.ttf') format('truetype');
} 

Make sure your relative url is correct to the location of the font too.

e.g.

src: url('/assets/fonts/Body/BYekan.eot?') format('eot'),

Answer 3

I found some inconsistencies in how Chrome and Android WebView try to pull relative URLs. Chrome pulls relative to the directory containing the CSS with the @font-face while Android WebView (perhaps less correctly) pull from the directory of the document.

Maybe something similar is happening with WP8.

Have you tried absolute URLs yet? What about choosing relative path using the opposite relative path ideology?