CODEWITHSUNDEEP
cssinternet-explorersafari
Anastasiou Design
Anastasiou Design

Reputation: 168

Font Face not working completely in Safari

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) ;
}

Upvotes: 12

Views: 46591

Answers (3)

primegxy
primegxy

Reputation: 1858

Easy fix for variable fonts

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

Upvotes: 7

brian
brian

Reputation: 311

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.

Upvotes: 31

Cristyan
Cristyan

Reputation: 670

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

Upvotes: 3

Related Questions