Что происходит со шрифтом на сайте и в photoshop?
Это разница между движками рендеринга шрифтов в ОС и Photoshop'е. Плюс, браузеры вносят свою лепту.
Чтобы было как на fonts.google.com, добавьте это в CSS:html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
Более ничего вы сделать не сможете.Update. Ну можно, конечно, хернёй помаяться ещё со следующими свойствами:-webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.1); /* Сильно влияет на рендеринг (условно, т. к. сам механизм рендеринга навряд ли меняет), аккуратнее с этим свойством */
text-shadow: #fff 0px 1px 1px; /* Да, LOL, оно тоже влияет на рендеринг */
 text-rendering: optimizeLegibility; /* Так и не понял результат работы  вот этого */
Опа. Закрываю глаза и пишу — SVG. Форматов шрифтов жеваная тьма и половина из них не поддерживается (утрирую). Лучший результат дают SVG шрифты (ИМХО), но поддерживаются откровенно криво. В плане при подключении шрифта последнее время обычно идет SVG, затем всякие Woff-ы и т.д. По какой причине может не подсосаться первый я не вдавался.
Ну и вообще ФШ инструмент, конечно, удобный, но в целом мало имеет общего с реальностью. Чего стоит шаманство по расчету размеров при переносе макета)
Немного оффтопом, в полиграфии, например шрифт обычно не печатается. Он переводится в кривые. В принципе для улучшения восприятия и уменьшения артефактов тот же подход оптимален и в вебе. Я сталкивался с иконочными шрифтами воичию и обнаружил жуткий артефакт. Был у одного товарища в офисе, у него подключено то ли 3 то ли 4 разного калибра и качества мониторов. В общем когда я увидел свой, с вроде предусмотренными на такие нюансы, в формате пиксельной лесенке, моему удивлению не было предела. Но как оказалось, тем же страдает и Fontawesome, что успокоило. Там же в статье я указал, что есть 2 набора, собственно шрифты, включая SVG шрифт, и символы. Символы это чистый SVG, и вот с ним проблем нет.
Короче, шрифты это полный ахтунг. Меня периодически типать начинает при серьезной работе с ними.