CODEWITHSUNDEEP
css
user1224985
user1224985

Reputation: 19

@font-face not working with Safari in Mac OS or in Ipad

I am having a problem with @font-face. I am using a custom font named Whitney. It is working properly with all browsers in Windows(including Safari). But not working with Safari in Mac OS or in Ipad. From internet, I have got the idea that .svg font format will work fine with safari. So I tried that as well. But still it is not getting applied. Even the .ttf font files of other fonts were working perfectly in Safari. Anyone please tell me what is wrong with my code...its given below. Or is the problem with this font?

@font-face
{
    font-family: bookFont;
    src: url("../fonts/whitney-book.eot");
    src: url( '../fonts/whitney-book.ttf' )format("truetype"), url('../fonts/whitneybook.svg#Whitney-book') format('svg');
}

Upvotes: 1

Views: 8450

Answers (2)

Mehdi Karimi
Mehdi Karimi

Reputation: 528

you have to use it like this :

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
url('myfont-webfont.woff') format('woff'), 
url('myfont-webfont.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');

}

Upvotes: 0

Dominic Tancredi
Dominic Tancredi

Reputation: 42342

Your syntax looks incorrect. You have a semi-colon when you need a comma, and you need a space between ')' and 'format'.

Last, make sure those urls resolve properly in a regular browser. They need to be relative to the CSS file, and not the webroot.

@font-face{
    font-family: bookFont;
    src: url('../fonts/whitney-book.eot') format('embedded-opentype'),
         url( '../fonts/whitney-book.ttf' ) format('truetype'), url('../fonts/whitneybook.svg#Whitney-book') format('svg'); }

Upvotes: 1

Related Questions