@font-face not working for IE, but is working for chrome?

Question

So trying to add a custom @font-face font to my asp.net project. Got it working in chrome browser...

@font-face
{
font-family: "Century Gothic";
src: url('GOTHIC.TTF'),
}

body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Century Gothic", Segoe UI, Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}

but need help with the others....(this is my attempt)...but not working:

@font-face
{
font-family: "Century Gothic";
    src: url('../GOTHIC.eot');
    src: url('../GOTHIC.eot?#iefix') format('embedded-opentype'),
        url('../GOTHIC.woff') format('woff'),
        url('../GOTHIC.ttf') format('truetype'),
        url('../GOTHIC.svg#URWClassicoItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

Also not sure if I need the .eot, .woff etc extensions. I have only added

GOTHIC.TTF
GOTHICB.TTF
GOTHICBI.TTF
GOTHICI.TTF to my prjoect.

working from:

http://stackoverflow.com/questions/8115302/font-face-not-working-even-after-trying-everything-i-could-think-of?rq=1

http://stackoverflow.com/questions/6238737/font-face-with-embedded-font-does-not-work?rq=1

http://stackoverflow.com/questions/20659571/adding-a-custom-font-to-vs-2010-fontface

Does this help: http://stackoverflow.com/questions/14287465/font-face-not-loaded/14287894#14287894 — 97ldave, Dec 19 '13 at 17:26

score 2 · Answer 1 · answered Dec 18 '13 at 17:03

2

You need the eot, woff etc file extensions - IE678 doesn't support TTF format, only EOT

answered Dec 18 '13 at 17:03

Xarus

6,589
4
15
22

score 0 · Answer 2 · answered Dec 18 '13 at 17:05

I think the problem is because of the use of a font across domains.

So the URL that starts “http://stackoverflow.com/questions/8115302/font-face-not-working-even-after-trying-everything-i-could-think-of?rq=1” is treated as being in a different domain than “http://www.stackoverflow.com/questions/8115302/font-face-not-working-even-after-trying-everything-i-could-think-of?rq=1” even if you see that the domain name refer to the same place of the system.

You need to switch to the relative url to get rid of the problem

You may also check Cross domain workaround for @font-face and Firefox which will help you.

This isn't the case for the issue at hand - which is that IE isn't displaying the fonts, due to a lack of support for TTF font types. — Xarus, Dec 18 '13 at 17:28

@font-face not working for IE, but is working for chrome?

2 Answers2