Bypassing Clear Type on web page

Question

I am trying to mimic the text in the articles on the website desiringgod.org. They use the Merriweather font with a dark grey color for the body text on a white background.

When I put the same settings on my website the text looks different, not quite as smooth and darker. I checked all the CSS and even went through some of the javascript to make sure everything was the same and to see if anything special was happening. I can't see anything that would account for the difference. (mine has different line height but that shouldn't make a difference). I even tried downloading their WOFF2 font just to see if that made a difference (as opposed to using the one from Google) and that didn't change anything either.

I then took a screen shot of a portion of text on each page (theirs and mine). Bringing it into photoshop I noticed that for the one coming from the desiring god website photoshop determined the image on the clipboard was greyscale but for mine it determined it was RGB. Then looking closer I noticed that it seems my page is being affected by ClearType on windows and the desiring god one is not. If you zoom in on the samples below you will see the colored antialiasing typical of cleartype on mine and the grey antialiasing on theirs.

Is there any way that could be possible? Is there any way to stop that from happening? The text on desiring god is more pleasing to read and I would like the same effect.

Answer 1

As you can see they have a slight different version from Google's Merriweather.

/* latin */

@font-face {
  font-family: 'Merriweather Google';
  src: url(https://fonts.gstatic.com/s/merriweather/v19/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
}
@font-face {
  font-family: 'Merriweather Desiring';
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/merriweather-v11-latin-300.64e603fa.woff2) format('woff2');
}
p.google {
  font-family: "Merriweather Google";
}
p.desiring {
  font-family: "Merriweather Desiring";
}
p {
  font-size: 18px;
  font-weight: 300;
  line-height: 180%;
  letter-spacing: normal;
  max-width: 700px;
  border-bottom-color: rgb(51, 51, 51);
  border-bottom-style:none;
  border-bottom-width: 0px;
  color: rgb(51, 51, 51);
  vertical-align:baseline;
  width:700px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

<p class="google">That’s not right. </p>
<p class="desiring">That’s not right. </p>

Answer 2

After spending way too many hours on something that really doesn't look that much different, I finally figured it out. Whew...

They put this class on one of the containers holding their text:

.gpu {
backface-visibility: hidden;
perspective: 1000}

Once I did that for my container all the anti aliasing was grayscale.