ⓒⓢⓢ

Без ссылки на сайт, на первый взгляд:

Периодически читатели жалуются вот на такую странную штуку:

Шрифт "PT Sans Narrow" не доступен для браузера и браузер пытается использовать следующий шрифт по цепочке в порядке следования это будут "'雅黑', '文泉驿微米黑', '黑体', sans-serif;"
На русских версиях ОС начертания русских глифов в китайских шрифтах может и не быть, как пример:

на скрине в одном текстовое поле, две строки текста
Русские символы отрендерились с паддингом, а английские нет - разность начертания шрифта

Из-за чего шрифт может быть не доступен?
Браузер пытается найти исходник шрифта, например, смотрит на:
1. local('PT Sans Narrow') - Но такого локального шрифта нет
2. local('PTSans-Narrow') - Такого локально тоже нет
Локальных копий нет, пытается найти на сервере:
url('../fonts/google-fonts/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff') format('woff');
И тут может быть ошибка:
Сервер не отдаёт шрифт - По урл пути нет шрифта, шрифт не поддерживается браузером и т.д.
Смотрите почему шрифт не доступен шрифт для браузера

Совет:
Если нет острой необходимости, то уберите китайский шрифты из списка. В случае проблем со шрифтами будут рендериться стандартные шрифты с нормальным очертанием (без паддинга)

Дополню ответ на вопрос "Почему не у всех?":
Шрифт доступен в интернете "PT Sans Narrow" и браузер пользователя на другом сайте уже когда то загружал этот шрифт к себе в локальный кеш. Поэтому может его использовать брать локальную копию (см. блок как браузер будет искать этот шрифт)

Пробуйте избавится от кириллицы в путях, если в данном случае и не поможет, то поможет в дальнейшем сохранить кучу времени
[09:54:05] Using gulpfile ~/Документы/apps/sg/gulpfile.js

Это из-за якоря в ссылке.
У вас получается такая логика:
1. Выполняется скрипт
2. Выполняется переход по якорю => теряем фокус с поля

Пробуйте возвращать false из обработчика onclick по нику

<a href="#message_form" onclick="setSthToTextarea('Fox'); return false;">Fox</a>

Так?
https://jsfiddle.net/tjuLjd0t/2/
см 62 строку

Для ul.slides, li.slide
добавить width: inherit; height: inherit;
И убрать отступы
https://jsfiddle.net/0zvdz9ye/3/

В зависимости от задач
1. gulp.spritesmith - собирает png в один спрайт
2. gulp-svg-sprite - собирает svg в один спрайт
3. Вставка svg спрайтов на страницу

Сейчас возможно уже и не актуально, но к моей практике не прижились
Фоновые svg (плохая кроссбраузерность, нельзя стилизовать из внешних стилей)
base64 (Распирает вёрстку, изменилась картинка - во всех местах везде надо менять картинку, использую крайне редко)

Вставку svg спрайтов на страницу, делаю по такой практике:
На странице делаю контейнер куда группирую все спрайты

<div data-ui="resources" style="display: none;">
   <svg data-ui="icon-pack">
      <g id="svg-search"><path d="M61.8,56.6l-15.1-15C50,37.2,52,31.8,52,26C52,11.7,40.3,0,26,0C11.7,0,0,11.7,0,26c0,14.3,11.7,26,26,26 c6,0,11.5-2,15.9-5.4l15,15L61.8,56.6z M26,44.9c-10.5,0-19-8.5-19-19C7,15.5,15.5,7,26,7c10.5,0,19,8.5,19,19 C45,36.4,36.4,44.9,26,44.9z"></path></g>
      <g id="svg-img"><path d="M0.8,0C0.4,0,0,0.4,0,0.8v22.9c0,0.4,0.4,0.8,0.8,0.8h24.7c1.2,1.5,3,2.5,5,2.5c3.5,0,6.4-2.9,6.4-6.5c0-2.7-1.7-5.1-4-6.1V0.8C33,0.4,32.6,0,32.2,0H0.8z M1.6,1.6h29.8V14c-0.3,0-0.5-0.1-0.8-0.1c-1.2,0-2.3,0.4-3.3,0.9l-3-3.2c-0.2-0.2-0.4-0.3-0.7-0.2 c-0.2,0-0.3,0.1-0.5,0.2l-5.7,5.1l-7.2-8.3c-0.2-0.2-0.5-0.3-0.7-0.3c-0.2,0-0.3,0.1-0.5,0.2l-7.5,7.9V1.6z M17.7,3.3 c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3c1.8,0,3.2-1.5,3.2-3.3C20.9,4.7,19.5,3.3,17.7,3.3z M17.7,4.9 c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C16.1,5.6,16.8,4.9,17.7,4.9z M9.6,10.2l11.1,12.7H1.6v-4.2 L9.6,10.2z M23.7,13.4l2.3,2.5c-1.1,1.2-1.9,2.8-1.9,4.6c0,0.9,0.2,1.7,0.5,2.5h-1.7L18.6,18L23.7,13.4z M30.6,15.5 c2.7,0,4.8,2.2,4.8,4.9c0,2.7-2.2,4.9-4.8,4.9s-4.8-2.2-4.8-4.9C25.7,17.7,27.9,15.5,30.6,15.5z M30.6,16.8c-0.4,0-0.8,0.4-0.8,0.8 v2h-2c-0.4,0-0.8,0.4-0.8,0.8c0,0.5,0.4,0.8,0.8,0.8h2v2c0,0.5,0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8v-2h2c0.4,0,0.8-0.4,0.8-0.8 c0-0.5-0.4-0.8-0.8-0.8h-2v-2C31.4,17.1,31,16.8,30.6,16.8z"></path></g>
      <g id="svg-plus"><path d="M15.6,7.1l-5.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c-0.2,0-0.4-0.2-0.4-0.5l0,0l0-5.1l0-0.3C9.8,0.6,9.2,0,8.5,0 C7.7,0,7.1,0.6,7.1,1.3l0,0.2l0,5.1c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0.3-0.2,0.5-0.5,0.5c0,0,0,0,0,0 c0,0,0,0,0,0l-5,0l-0.3,0C0.6,7.1,0,7.7,0,8.5c0,0.7,0.6,1.4,1.3,1.4h0.2l5.1,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0.3,0,0.5,0.2,0.5,0.5c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,5.1l0,0.2C7.2,16.4,7.8,17,8.5,17 c0.8,0,1.4-0.6,1.4-1.4l0,0l0-5.2c0,0,0,0,0,0c0,0,0,0,0,0c0-0.3,0.2-0.5,0.5-0.5l0,0l5.1,0l0.2,0C16.4,9.9,17,9.2,17,8.5 C17,7.7,16.4,7.1,15.6,7.1L15.6,7.1z"></path></g>
   </svg>
</div>

В документе использую так (для svg передаю ид. спрайта в аттрибуте xlink:href="..."):

<button data-ui="search">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.8 61.5"><use x="0" y="0"  xlink:href="#svg-search"></use></svg>
</button>

На счёт раста и dpi, использую 2 вида спрайта для каждой иконки (обычный монитор и ретина).
Если требуется поддержка 3х и более разновидностей плотности в ход идёт svg.
Но в основном и для мобильных девайсов (пример 120dpi) использую ретиновские спрайты, проблем с качеством иконки не замечал, единственное объём трафика на иконки повышается до ~5-10%

Что-то такое? (2 картинки mail и setting +ховер к ним)

.i-mail {
  background-position: 0px 0px;
  width: 256px;
  height: 256px;
}
 .i-mail_hover {
  background-position: -256px 0px;
  width: 256px;
  height: 256px;
}
 .i-setting {
  background-position: 0px -256px;
  width: 256px;
  height: 256px;
}
 .i-setting_hover {
  background-position: -256px -256px;
  width: 256px;
  height: 256px;
}

Файл gulpfile.js Подключаем шаблон в опцию spritesmith`а (cssTemplate)

var spriteData = gulp.src(dir_app + path.src.imgSprites) /*выберем откуда брать изображения для объединения в спрайт */
   .pipe(sprites({
      retinaSrcFilter : [dir_app + path.src.imgSprites2x],
      retinaImgName   : 'sprite@2x.png',
      imgName         : 'sprite.png', /* имя спрайтового изображения */
      cssName         : '_sprites.scss', /* имя стиля где храним позиции изображений в спрайте */
      cssTemplate : './app/css/sprites.template.handlebars',
      cssVarMap       : function (sprite)
      {
         /* имя каждого спрайта будет состоять из имени файла и конструкции 'i-' в начале имени */
         sprite.name = 'i-' + sprite.name;
      }
}));
/* путь, куда сохраняем картинку */
spriteData.img.pipe(gulp.dest(dir_app + "/asset/css/"));
   
   /* путь, куда сохраняем стили */
spriteData.css.pipe(gulp.dest(dir_app + "/css/"));

Файл sprites.template.handlebars

{{#items}}
.{{name}} {
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/items}}