I connected the google font and it is displayed differently everywhere, what should I do?

Question

Google

Snapshot from Safari

Snapshot from Chrome + Mozilla Firefox
Connected like this:
< link href=' https://fonts.googleapis.com/css?family=Open+Sans:400 ,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset =latin,cyrillic' rel='stylesheet' type='text/css' >
In the CSS file I write
font-family: 'Open Sans'; font-style: normal font-weight: 300 font-size:16px;
Why such difference of display in browsers???
But on the site google.com/fonts these fonts are displayed the same way!!! What kind of nonsense???

Answer 1

For containers with problematic text:

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Answer 2

Include this css file https://necolas.github.io/normalize.css/

Answer 3

Different browsers have different font rendering methods, especially in safari.
When connecting to html, I came across the fact that the address with parameters is not always well parsed, you can connect in other ways, for example, via @import.
It is also worth noting that Chrome displays sites at 100% scale, most others increase it slightly to 125%.