CODEWITHSUNDEEP
cssinternet-exploreriisfont-face
user2524908
user2524908

Reputation: 871

@font-face not working in IE when not on server

I have implemented @font-face for a number of fonts on a website. This is an asp website hosted on IIS7. Currently I am testing with FF23, Chrome, IE8/9/10. I am having some difficulties with the fonts in IE. When I am not accessing the webpage from my server the fonts will render properly on FF and Chrome, however on all the IE browsers they will not. When I am accessing the website on the server(2008 r2) I am using the same URL(fully qualified domain name). When I am accessing not on the server I am using the same fully qualified domain name. Both the fonts and the website are hosted on the same machine(same domain). There are no errors thrown by @font-face in FF or Chrome, not sure how to check in ie. 

@font-face {
    font-family: 'sf_movie_posterregular';
    src: url('./fonts/customtitle-webfont.eot');
    src: url('./fonts/customtitle-webfont.svg#sf_movie_posterregular') format('svg'),
         url('./fonts/customtitle-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/customtitle-webfont.woff') format('woff'),
         url('./fonts/customtitle-webfont.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;

}

Upvotes: 1

Views: 1221

Answers (2)

user2524908
user2524908

Reputation: 871

After adding 'local' to the fonts, it worked accross all browsers. 

@font-face {
    font-family: 'sf_movie_posterregular';
    src: url('./fonts/customtitle-webfont.eot');
    src: local( 'sf_movie_posterregular'),
         url('./fonts/customtitle-webfont.svg#sf_movie_posterregular') format('svg'),
         url('./fonts/customtitle-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/customtitle-webfont.woff') format('woff'),
         url('./fonts/customtitle-webfont.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;

Upvotes: 0

Paul Connolly
Paul Connolly

Reputation: 371

Add woff as a mine type to IIS. (.woff, application/font-woff)

Go to IIS Manager, and select your website, and choose MIME Types from the right.

Upvotes: 2

Related Questions