1) Попробуйте добавить:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
для body
2) Подключите шрифты через Google fonts (до закрывающего тэга
</head>):
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet">
3) Нужно обязательно задать корректный font-family и font-weight: 300; для тех мест, где вам нужно отобразить шрифт:
.cite {
font-family: "Open Sans", Helvetica, Arial, Sans-sarif;
font-weight: 300;
}
Можно это сделать глобально (для всего сайта), в том же body:
body {
font-family: "Open Sans", Helvetica, Arial, Sans-sarif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Откройте исходный код любого сайта с кастомными шрифтами (через веб инспектор/панель разработчика), посмотрите как сделано у них (можно посмотреть на том же тостере).
Простой
