1

The font Avenir Next is not displaying/rendering the same on Safari as it is on Google Chrome and Firefox. Is there a way to fix this or to use a separate font for my webpage on Safari? How would I go about this?

I would prefer the solution to be pure html/css (perhaps there is an @media for browsers?). If not possible I could use javascript or jQuery.

EDIT: Solved, the problem is Safari font-smoothing. See my own answer below

Cheetaiean
  • 901
  • 1
  • 12
  • 26
  • Quick search turned up: http://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome – ryachza Aug 25 '15 at 17:48
  • 2
    Don't do it! Just choose another font that looks good. – Iansen Aug 25 '15 at 17:49
  • @ryachza I was searching "specific font-family for specific browser" without specifying Safari and not being general, that must have been why I didn't see the other one. – Cheetaiean Aug 25 '15 at 17:56
  • 1
    Indeed - I searched for "safari only css hack" because when I read "how do I do X in only browser Y" that's just how I interpret it. You should listen to @lansen though unless you have a really good reason not to! – ryachza Aug 25 '15 at 18:04
  • It's a font problem: Avenir Next is rendered differently on each browser (chrome + safari) regardless of specifications (i.e. the font-weight setting). Will do some research as to why. – Cheetaiean Aug 25 '15 at 18:09

2 Answers2

2

Well you say JS is a possibility even if it's not your preference.

I wrote a library about 100 years ago called BAPS (browser and plugin sniffer) which detects a whole host of stuff and adds body classes.

http://vostok.xyz/cdn/baps.js

You don't do anything to it - you just include the script, and end up with a bunch of body classes if you inspect the DOM.

enter image description here

Mitya
  • 33,629
  • 9
  • 60
  • 107
  • Thanks for your answer, however luckily it wasn't necessary as I found the root issue and fixed it. But if anything pops up that needs your library I will use it. PS didn't know Javascript was over a 100 years old ;) – Cheetaiean Aug 25 '15 at 18:48
  • 1
    No worries. Yeap, the early drafts of its API were written circa 1500's. – Mitya Aug 25 '15 at 18:49
1

Safari has its own separate font-smoothing (that is, an automatic function adjusting the font to render nice and proper)from other browsers like Chrome or Firefox. In the case of discrepancies such as those I encountered, we can manually alter the automatic font-smoothing in our CSS with

-webkit-font-smoothing

In my case, font-smoothing on Safari was automatically set on antialiased, while the standard (font-smoothing used on Chrome and Firefox) was subpixel-antialiased.

Simply added:

-webkit-font-smoothing: subpixel-antialiased !important;

And the font now displays the same as in Chrome and other browsers.

For more on Safari font-smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing

Cheetaiean
  • 901
  • 1
  • 12
  • 26