Подключил шрифт google а он отображается везде по разному, что делать?

Question

[seredaes]

Снимок с Сафари


Снимок с Хрома + Мозила ФАйрфокс

Подключил так:
< 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' >

В CSS файле прописываю
font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-size:16px;

Почему такая разница отображения в браузерах???
А вот на сайте google.com/fonts эти шрифты отображаются одинаково!!! Что за ерунда???

Answer 1

[Мак Алексей]

Для контейнеров с проблемным текстом:

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

Answer 2

[lavezzi1]

Подключите этот файл css https://necolas.github.io/normalize.css/

Answer 3

[Кирилл Туровников]

В разных браузерах отличаются методы рендеринга шрифтов, особенно в safari.
При подключении в html сталкивался с тем что адрес с параметрами не всегда хорошо распарсивается, можно подключить другими способами например через @import.
Так же стоит отметить что Chrome отображает сайты в масштабе 100%, большинство других немного увеличивают до 125%.