CODEWITHSUNDEEP
cssmacosfont-face
user1780780
user1780780

Reputation: 9

font-face does not display on Mac

I have a very strange problem in a website.

We've recently launched a website, which works fine on PC. But when it comes to Mac the browser does not display any fonts at all.

I am using font-face to include a specific font and there are 2 different stylesheets, depending on screen width. I have tried several options found here but none seemed to work. The last syntax i used in my css was like this

@font-face {
    font-family:'ChollaSansGr';
    src: url('http://:/')format('IE-No-404'),url('./fonts/ChSaGrRg.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

So my question is if can anyone help me with the solution or give a suggestion about what could be the root of the problem.

Upvotes: 0

Views: 6499

Answers (1)

Kyle Yeo
Kyle Yeo

Reputation: 2368

If you're using Safari, I found this solution on the Net:

Well it turns out I DID solve it, at least so far on Mac. Here it is:

font-squirrel and font registries that create webkits generate the CSS using " and ' around the URLs. This seems to jack things up. They also set all the weights and styles to normal which also seems to wreak havoc.

here is the code generated by font squirrel for 2 of the faces of Lato:

@font-face {
    font-family: 'LatoBlackItalic';
    src: url('Lato-BlackItalic-webfont.eot');
    src: url('Lato-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-BlackItalic-webfont.woff') format('woff'),
         url('Lato-BlackItalic-webfont.ttf') format('truetype'),
         url('Lato-BlackItalic-webfont.svg#LatoBlackItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoBlack';
    src: url('Lato-Black-webfont.eot');
    src: url('Lato-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-Black-webfont.woff') format('woff'),
         url('Lato-Black-webfont.ttf') format('truetype'),
         url('Lato-Black-webfont.svg#LatoBlack') format('svg');
    font-weight: normal;
    font-style: normal;
}

Here is what I changed it to that actually works in Safari and Chrome and Firefox:

@font-face {
   font-family: Lato;
    src: url(../../fonts/Lato-BlackItalic-webfont.eot);
    src: url(../../fonts/Lato-BlackItalic-webfont.eot?#iefix) format(embedded-opentype),
         url(../../fonts/Lato-BlackItalic-webfont.woff) format(woff),
         url(../../fonts/Lato-BlackItalic-webfont.ttf) format(truetype),
         url(../../fonts/Lato-BlackItalic-webfont.svg#LatoBlackItalic) format(svg);
    font-weight: 900;
    font-style: italic;
}


@font-face {
    font-family: Lato;
    src: url(../../fonts/Lato-Black-webfont.eot);
    src: url(../../fonts/Lato-Black-webfont.eot?#iefix) format(embedded-opentype),
         url(../../fonts/Lato-Black-webfont.woff) format(woff),
         url(../../fonts/Lato-Black-webfont.ttf) format(truetype),
         url(../../fonts/Lato-Black-webfont.svg#LatoBlack) format(svg);
    font-weight: 900;
    font-style: normal;
}

Link is here : http://css-tricks.com/forums/discussion/10797/font-face-not-working-in-only-safari-/p1

Hope this helps.

Upvotes: 4

Related Questions