CODEWITHSUNDEEP
windows-phone-8fontsfont-face
Hamid Yaftian
Hamid Yaftian

Reputation: 145

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

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?

Upvotes: 1

Views: 362

Answers (3)

MicronXD
MicronXD

Reputation: 2220

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?

Upvotes: 1

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

  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;
}

Upvotes: 1

DLaverick
DLaverick

Reputation: 655

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'),

Upvotes: 2

Related Questions