Font ttf file not working with IE

Question

Im playing around with a site and ttf fonts, but for somereason the font does not want to work in IE.

The css is simple and it works with chrome, but not IE.

@font-face 
{
font-family: 'CAROBTN';



src: url('fonts/CAROBTN_.ttf');



}

Any ideas?

The simple play site is Digi notes

What IE version are you using? EDIT: It looks like even Microsoft Edge still doesn't support TTF. You need to convert your font to WOFF or EOT. — Jairo, May 19 '16 at 20:53

score 4 · Accepted Answer · edited May 23 '17 at 12:31

4

Some IE versions don't play nicely with ttf, see here:

What is the status of TTF support in Internet Explorer?

You will likely need a .eot fallback:

@font-face 
{
font-family: 'CAROBTN';

src: url('fonts/CAROBTN_.ttf'),
     url('fonts/CAROBTN_.eot');

}

You can convert font files here: https://www.fontsquirrel.com/tools/webfont-generator

edited May 23 '17 at 12:31

Community

1
1

answered May 19 '16 at 20:55

phynam

467
2
12

Thanks, Ill try first thing in the morning. – Chris Cooper May 19 '16 at 20:58

score 1 · Answer 2 · answered May 19 '16 at 20:57

1

IE needs .eot font format. you can convert your existing .ttf font to .eot format using this online converter

answered May 19 '16 at 20:57

Sark

4,458
5
26
25

Thanka. Ill try the convert, to convert my ttf and do a fallback. – Chris Cooper May 19 '16 at 20:59
Thanks that site worked for one of my fonts. But didn't for but thanks anyway – Chris Cooper May 19 '16 at 21:16

score 0 · Answer 3 · answered Dec 18 '17 at 06:21

For IE you need to use .eot font format, so you need to convert your ttf file to eot, with a converter like http://www.fontsquirrel.com/ webfont generator.

For Cross-browser compatibility use all the font formats not just ttf.

@font-face {
    font-family: 'Example Font';
    src: url('fonts/Example-font.eot');
    src: url('fonts/Example-font.eot?#iefix') format('eot'),
         url('fonts/Example-font.woff') format('woff'),
         url('fonts/Example-font.ttf') format('truetype'),
         url('fonts/Example-font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

And for some Chrome font rendering issue, the best solution is to put the svg format at the first position, because in that case the you get the best font rendering result.

Font ttf file not working with IE

3 Answers3