@font-face IE not working

Question

When I use this on my style tag the font works just fine with FireFox and Google Chrome And Edge :

@font-face {
    font-family: 'AlArabiyaRegular';
        src :url('template/fonts/ae_AlArabiya.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

but it's not working on IE so I seareched about it and it's looks like I have to use 'woff' and 'eot' in order to make it work with IE so I used this code :

@font-face {
    font-family: 'AlArabiyaRegular';
  src: url('template/fonts/ae_AlArabiya.eot');
  src: url('template/fonts/ae_AlArabiya.woff') format('woff'), 
       url('template/fonts/ae_AlArabiya.tff') format('truetype'), 
       url('template/fonts/ae_AlArabiya.svg#webfontg8dbVmxj') format('svg');
}

but when I change my style to it's not working even on FireFox

I think you are missing the format for eot src: url('template/fonts/ae_AlArabiya.eot') format('embedded-opentype') I am not sure it'll work but you can test it. — Rajib karmaker, Aug 07 '18 at 12:29
@HirenDavda Iam sure about my directory structure because first code was working just fine and all fonts are at the same directory — Ahmed Badreldin Amado, Aug 07 '18 at 12:33
take screenshot your project directory and share with us. So we can find out were is the problem. may be your font path is not define properly — Hiren Davda, Aug 09 '18 at 06:05

score 0 · Answer 1 · answered Aug 07 '18 at 12:41

Use all the css font family src posibilities:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

score 0 · Answer 2 · answered Aug 08 '18 at 06:49

0

If a .ttf works in other browsers but not IE, it's usually a sign that the font hasn't got the "installable bit" set. See this thread for more info and fixes.

answered Aug 08 '18 at 06:49

RoelN

2,181
13
15

@font-face IE not working

2 Answers2