Font-awesome: Mac Safari 7.0.2+ font-family on .fa class

[briananderson1222]

I ran into an issue that existed only on Mac versions of Safari where the font was not getting loaded most of the time. I would create a jsFiddle but the way that jsFiddle runs the page it does not seem to be reproducible in this context. The fix I have used for now is to put quotes around the font-family declaration in the .fa class.

I am quite puzzled that I have not seen anyone else post anything about this issue and it makes me wonder the validity of this catch. It seems quite obvious that we should have quotes around the font-face that was defined but at the same time it seems to work fine in Chrome, IE, Firefox, and even in Safari.. but Safari was only working in specific situations. I would love some insight into why this is happening but for now this fix seems to do the trick for me.

Changing the following line seems to fix this issue:

OLD
.fa {
font-family: FontAwesome
}

NEW
.fa {
font-family: 'FontAwesome'
}

[tagliala]

thanks for reporting this, I will take a look

[tagliala]

@briananderson1222

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L8

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

it's already quoted.

[briananderson1222]

@tagliala

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L16

I was referring to this line. Upon further evaluation I believe this is a bug with Safari, but for best cross-compatibility I will be leaving this fix in my own code

[tagliala]

ops sorry

I don't think that escaping the font name it will hurt other browsers...

Glyphicons quotes that, but they have to since it contains a space: https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less#L25

Ratchicons doesn't: https://github.com/twbs/ratchet/blob/master/sass/ratchicons.scss#L18

I will take a look by myself tomorrow. Do you mind to check if you can reproduce with ratchicons and glyphicons?

[tagliala]

I should consider to go to sleep :grin:

Ratchicons doesn't quote the font name on both @font-face and .icon

[briananderson1222]

I don't know if it's because it's declared in one place with quotes and the other without it, but nonetheless it was a very strange issue that I could only reproduce in OS X Safari 7.0.2 and above and even then it works sometimes (like in jsFiddle).

I can test out those two other icon styles and let you know if I have similar problems. Like I said I believe it's a bug with OSX Safari and not WebKit in general, but for full cross-compatibility the issue should probably be addressed if others are also seeing it. I am surprised that I have not seen any other users report this issue.

Stay tuned for results on those two icon styles..

[tagliala]

OSX 10.9.2
Safari 7.0.3

Refreshed about 50 times with cache disabled

Wasn't able to reproduce on fontawesome's website but I still think that FontAwesome should be unquoted in the @font-face definition

[meruff]

Man thanks for this. Been searching the web for hours on why it works on one of my sites, but not the other. Cheers.

[tagliala]

@detonation0 did you experience the very same issue?

[meruff]

@briananderson1222's fix worked for me. I had the font-family for my site set to Helvetica, which seemed to be causing FA icons so display white squares. Changing the .fa class to font-family: 'FontAwesome'; fixed it.

[tagliala]

fortunately that is not the same issue

[hellifiknow]

I have been running into this very issue with Safari for a web app I'm working on.
@tagliala - the issue will not present itself unless cache is enabled. From what I have seen it happens when the Safari cache gets stale. When this happens Safari won't load the font file referenced in the css.

Here is how I fixed it for my situation. Include this javascript in your page:

function addDeclaration(css){
    if (document.createStyleSheet){
        var st = document.createStyleSheet();
        st.cssText = css;
    } else {
        var st = document.createElement('style');
        st.textContent = css;
        document.getElementsByTagName('head')[0].appendChild(st);    
    }

};      

var css = '@font-face {'+
'    font-family: \'FontAwesome\';'+
'    src: url(\'//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0\');'+
'    src: url(\'//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts//fontawesome-webfont.eot?#iefix&v=4.2.0\') format(\'embedded-opentype\'), url(\'//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0\') format(\'woff\'), url(\'.//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0\')'+
'format(\'truetype\'), url(\'//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular\') format(\'svg\');'+
'    font-weight: normal;'+
'    font-style: normal'+
'}'+
'.fa {'+
'    display: inline-block;'+
'    font: normal normal normal 14px/1 FontAwesome;'+
'    font-size: inherit;'+
'    text-rendering: auto;'+
'    -webkit-font-smoothing: antialiased;'+
'    -moz-osx-font-smoothing: grayscale'+
'}';

Add this line to end of your document.ready:
addDeclaration(css);

This will cause Safari to load the font file and the icons will display correctly.

[tagliala]

@hellifiknow thanks. so this is a safari issue unrelated to fontawesome?

[hellifiknow]

@tagliala Yes, from what I have seen it is a specific issue with Safari caching when a site does an immediate redirect from one page to another and unrelated to fontawesome.

[tagliala]

time for a new label :)

[tagliala]

closing here

[renholm]

@hellifiknow We've seen the same behaviour on our site. Icons work very well the first day or two, on later visits it is replaced by squares. Do you know if this is a known bug tracked somewhere?

@tagliala Not sure this is completely unrelated to fontawesome, we have another font kit and that shows up fine.