Font Face not working completely in Safari

Question

I am using the Font Face Property and I have tested it in Firefox, Chrome and Opera...it works fine. however when I try it in safari and explorer it only works on one line and not the other

here is the css :

 @font-face { 
     font-family: font2;
     src:url(../fonts/Artbrush.TTF) ;
 } 

@font-face { 
    font-family: font1;
    src :url(../fonts/playbiln.TTF) ;
}

Crowley

Answer 1

I had this problem before. what happens is that the ttf fonts do not usually work well on mac / safari

Safari and IE can't read TTF and EOT fonts

Zannini

Thank you very much...this helped alot..it seams that safari reads Woff fonts – Crowley

Answer 2

changing font-style: italic; in my @fontface declarations in the css file to (even though what was being used was an italic, oblique font) font-style: normal;... on the italic fonts mind you...

Safari now displays them fine and it doesn't seem to break other browsers for this mismatched work-around.

Consubstantial

this fixed it for me -- typekit was producing a CSS @font-face rule for a font that used font-style:italic and that broke it for Safari - changing to font-style:normal fixed it (specifically the font was Eloquent JF Pro) – Gossipmonger

yes, as said, if you already load an Italic Font, the css style rule should be just normal – Malissamalissia

Thanks so much for this. scratching my head over for this problem – Lorsung

I can't thank you enough for posting this answer! I couldn't figure out why Safari refused to download a recursive font I added for my Angular project. – Betray

Answer 3

Easy fix

For me, adding font-weight: 1 1000; property made it work for safari as well. In-appropriate font-weights are now fixed.

@font-face {
  font-family: 'Inter var', sans-serif;
  src: url('/fonts/Inter-roman-latin.var.woff2') format('woff2');
  font-weight: 1 1000;
}

• One more benefit is, you don't need to check for the @support.
• To be more cautious, please check MDN Docs for font-weight

Lovelorn