Defining a font for Internet Explorer and every other browsers

Question

I'm trying to get my fonts definition with @font-face work on Internet Explorer, but I can't.

I am using 3 fonts. Here is the code I wrote :

@font-face {
    font-family : Rokkit;
    src : url("fonts/Rokkitt-Regular.ttf");
}

@font-face {
    font-family: "PT Sans";
    src: url("fonts/PT-Sans.ttf");
}

@font-face {
    font-family: Mako;
    src: url("fonts/Mako.ttf");
}

Everything works fine on other browsers, but not in IE. So I added this line to every font definition :

@font-face {
    font-family : Rokkit;
    src : url("fonts/Rokkitt-Regular.ttf");
    src : url("fonts/Rokkitt-Regular.eot");
}

But then, not only it still doesn't work on IE, but it stops working on Firefox, Chrome, Safari, ... What should I do ?

Thank you.

So for the second time, this question is not a duplicate. I you had read my question, you would have understood that there is a big difference between these two questions : in my problem, not only the fonts don't work on IE, but when I try to define them for this specific browser, the fonts stop being displayed for the other browsers. So it is a double problem. What's funny is that I already posted this exact same question. And you marked it as duplicate so I had to delete it and repost it to get some answers. PLEASE TAKE THE DUPLICATE TAG OFF !!! IT IS NOT DUPLICATE — tomfl, Sep 06 '16 at 15:41

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

You can try this solution, i saw on some website: Also given here

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
}
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
}
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
}

This also may help you, acc. to Fontspring Blog:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

edited May 23 '17 at 12:08

Community

1
1

answered Sep 06 '16 at 15:37

Pravesh Agrawal

869
1
11
27

It helped a bit because now the font is correctly displayed in Firefox, but it didn't change anything for IE ! – tomfl Sep 06 '16 at 15:46
Did you checked the log at console, if path is correct or not? – Pravesh Agrawal Sep 06 '16 at 15:47
How do you do that ? – tomfl Sep 06 '16 at 15:48
Ok so I just did that and nothing is displayed. No warnings or errors. – tomfl Sep 06 '16 at 15:52
Oh, I just thought about something. I'm on a Mac so I'm using an IE emulator with an app called Microsoft Remote Desktop. I read somewhere that the fonts are not always displayed correctly when the browser is emulated. Do you think this could be the problem ? – tomfl Sep 06 '16 at 15:56
May be that, you can give a try on some other PC too. – Pravesh Agrawal Sep 06 '16 at 15:58
I already tried the second solution, and it didn't work :( – tomfl Sep 06 '16 at 16:03
Looks there is some other issue in your case, you might check it thoroughly to get it working. – Pravesh Agrawal Sep 06 '16 at 16:05

Defining a font for Internet Explorer and every other browsers

1 Answers1