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..

    How to achieve a lightbox effect with css only? Example available

    How to style a built-in comment box imported from a third party?

    How to insert a line break
    after every

    How can I keep the progress bar number value centered and on top?

    How can I have a table with a set height but auto height cells

    How to make bootstrap 3 navbar not wrap

    How can I write a complex fraction using HTML/CSS/jQuery?

    How to remove or hide element using jquery or css

    unexpected script/css conflict, how to resolve?

    How to Centre Glyphicon Vertically In Bootstrap Button

    How to set the specific prefix for file-loader in webpack?

    How to create a custom vaadin component in vaadin 6

    How to override css cursor property of a hovered button?

    How to apply bootstrap css to all buttons

    Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

    How to give cross browser transparency to element's background only?

    css/jquery - how to hide last row of floated elements if not even

    CSS How to make image size relative to parent?

    How to make angled borders for tables.

    css nested classes, how to not repeat code?

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    How to justify 4 divs in one row [duplicate]

    How to put space between figure in image?

    CSS How to get height between header and footer?

    How is physical inch related to pixels in css given so many different resolutions?

    How to make this css readable?

    JQuery JQGrid - how to CSS right/left align without touching the grid lines?

    How do I use CSS to to vertically center align an image in a div?

    how to override the ice:commandLink css

    how to scale image according to image - css