Fonts Are Displaying Different In Chrome / Firefox

Every One. I am getting issues in displaying my page in different browsers. Here i am using 'Myrid Set Pro' font. I am getting correctly in chrome. but not in firefox. I am attachi

Solution 1:

Currently, there is no consensus on this topic. Shamefully, there are lots of tricks but no specific solutions for this issue.

The problem is, every browser and operative system handles font rendering differently. That is why is so difficult to get the same results across web browsers and systems.

This same question has been asked a couple of times here on SO:

1.- How do I get font to display properly in all browsers?

2.- Same font yet its weight seems different on different browsers

Below, I will list some of the proposed solutions; however it is possible they won't work:

// @Mohamed Anis Dahmani
html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px1px1pxrgba(0,0,0,0.004);
}

// @oneiotaspeak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

And there is also another one using translate3d: webfont-rendering-fix.css

body {
  -webkit-transform: translate3d(0px, 0px, 0px);  /* Force hardware acceleration to fix safari opacity bugg*/ 
}

My suggestion, look for web safe fonts http://cssfontstack.com/ which would minimize the impact of font rendering across web browsers and operative systems.

Solution 2:

I've had the same issue in the past. Check out this article on font faces across browsers - hopefully this can help resolve your issue.

http://alistapart.com/article/say-no-to-faux-bold

---

Update with new information:

I found a much simpler method to resolve this (as for me, it turned out that this was only occurring on Firefox for OSX) - add the following to your base typography css file:

-moz-osx-font-smoothing: grayscale;

There is more information in this CSS-Tricks.com forum discussion: https://css-tricks.com/forums/topic/typekit-fonts-much-bolder-in-firefox/page/3/

While the forum discussion title specifically mentions Typekit fonts, the solution applied beautifully to google fonts.