CODEWITHSUNDEEP
csstwitter-bootstrapfontsfont-facefont-awesome
Anri
Anri

Reputation: 6265

Browsers are not requesting font file

I'm having a really weird issue with font-awesome.

Long story short: browsers are ignoring 'src' part of @font-face and not making any requests for the actual font.

//font-awesome.css excerpt

@font-face {
    font-family: 'FontAwesome';
    src: url('/Content/fonts/fontawesome-webfont.eot?v=4.0.3');
    src: url('/Content/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('/Content/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('/Content/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('/Content/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

http://jsfiddle.net/c2zUh

Upvotes: 6

Views: 4680

Answers (3)

OJay
OJay

Reputation: 4921

Your HTML is not referencing the base class of the icons (to set the font). You need to include the base class and then the icon i.e. 

<span class="glyphicon glyphicon-asterisk"></span>

not 

<span class="glyphicon-asterisk"></span>

and 

<i class="fa fa-group"></i>

not 

<i class="fa-group"></i>

you need the glyphicon and fa classes as well

and as a note, It appears that if you do not use the font in a style rule (the @font-face doesn't count) that is actually applied to an element, it is not requested. So unless an element had a glyphicon or fa class the relevant font files would not be downloaded. I must admit, that's news to me.

Upvotes: 9

Igor Benikov
Igor Benikov

Reputation: 897

You also can try to embed font in woff format - right in your .css file in base64. It's works perfectly in all browsers, and IE 9+

Also, may be scenario, what this font already installed in your system, and this prevent from download...

Upvotes: 0

Adam McElroy
Adam McElroy

Reputation: 458

Try opening your site in IIS and going to Properties > HTTP Headers > MIME Types. For each of the following, add a new MIME type:

Extension: .otf

MIME Type: font/otf

-

Extension: .svg

MIME Type: image/svg+xml

-

Extension: .woff

MIME Type: application/x-font-woff

Let me know if this makes a blind bit of difference!

Upvotes: 0

Related Questions