What happens to the font on the site and in photoshop?

Question

Fonts

Hello. Pay attention to the Open Sans semibold font:
First image
Second image
Explanation
1. On font.google.com - this means that I went to the page with the font https://fonts.google.com/specimen/Open+Sans
2. This means that in Adobe Photoshop CC the Open Sans Semibold font was selected, and the anti-aliasing type was "Saturated"
3. This means that I connected the font to the site

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&amp;subset=cyrillic" rel="stylesheet">

And in css I wrote font-family: 'Open sans'; font-weight:600; font-size: 16px;
4. The same as in 2, but only smoothing "Smooth"
Essence
As you can see, all fonts differ from each other. Fonts in the browser still acquire color penumbraes, in turn, the font in Photoshop has only gray shades, although in both cases the color is black.
But the most important thing is the density of the font itself. Saturated and on Google are similar to each other, and smooth with a font on a regular site are also similar. The main word here is LIKE, because if you make the effect "Black and White", then there will be nothing in common between the fonts at all.
Now a question.
Why is the font on the Google site different from the font on any other site?
How to do
FOR THE PARTICULARLY ATTENTIVE The
main question is that the same font behaves differently even on different sites. What's wrong with Google fonts?

Answer 1

This is the difference between the font rendering engines in the OS and Photoshop. Plus, browsers do their bit.
To make it look like fonts.google.com, add this to your CSS:

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

There is nothing more you can do.
update. Well, you can, of course, mess with garbage with the following properties:

-webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.1); /* Сильно влияет на рендеринг (условно, т. к. сам механизм рендеринга навряд ли меняет), аккуратнее с этим свойством */
text-shadow: #fff 0px 1px 1px; /* Да, LOL, оно тоже влияет на рендеринг */
 text-rendering: optimizeLegibility; /* Так и не понял результат работы  вот этого */

Answer 2

Opa. I close my eyes and write - SVG. Font formats chewed darkness and half of them are not supported (exaggerating). The best result is given by SVG fonts (IMHO), but they are frankly crookedly supported. In the plan, when connecting a font, SVG usually comes up lately, then all sorts of Woffs, etc. For what reason, the first one may not suck, I did not go into.
Well, in general, the FS tool, of course, is convenient, but in general it has little to do with reality. What is the shamanism for calculating the size when transferring the layout)
A little offtopic, in printing, for example, the font is usually not printed. It is converted to curves. In principle, to improve perception and reduce artifacts, the same approach is optimal on the web. I facedwith icon fonts personally and found a terrible artifact. I had a friend in the office, he had either 3 or 4 monitors of different caliber and quality connected. In general, when I saw mine, with what seems to be provided for such nuances, in the format of a pixel ladder, my surprise knew no bounds. But as it turned out, Fontawesome suffers the same, which reassured me. In the same article, I indicated that there are 2 sets, the actual fonts, including the SVG font, and symbols. Symbols are pure SVG, and there are no problems with it.
In short, fonts are a complete mess. I periodically start to type when I work seriously with them.