Safari displays font differently from other browsers -Set specific font-family for specific browser - How to change font smoothing for Safari [closed]

Tags: javascript,jquery,html,css

Problem :

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

Solution :

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


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:

    CSS Howto..

    Unsure how to use border-bottom in CSS

    How can I move a div with direction in JavaScript?

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    How to insert a div below dynamic divs row after onclick

    How to select an element that must have more than one css class?

    How to align lists to top right?

    How to strongly force line-height in css, with no streches?

    how to select css class attributes from mootools,getStyle()?

    960 CSS Framework, how to get full 960 width?

    How to make CSS zig-zag borders? [duplicate]

    How do you center a picture AND left align text that is touching said picture? HTML5

    How to select an item that is into another item using CSS?

    How to show the same font which in photoshop on my webpage?

    How to make a webpage display dynamic data in real time using Python?

    How to create header numbers with CSS

    How can I size these spans so that the pictures don't extend past them?

    How to fit an image according to screen size

    jQuery - How to make images overlap when fading in and out?

    css how to prevent content from drifting underneath fixed position areas?

    How to align elements equally in a line in CSS/Bootstrap?

    How to draw half-opened line in CSS? [closed]

    How to Insert Images inside DIV in this case

    How to apply jQuery on css selector :before [duplicate]

    Div's don't show up

    How to include stylesheet file only for one div?

    How to style
  • s inside
      as a table with custom height?
  • How to create this type of window,as described in the attached picture with HTML,CSS? [closed]

    How do I get the (element with the) highest CSS z-index in a document?

    How to stop text in div pushing other divs down the page?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?