Как правильно подключить googlefont к сайту?

Question

[ingenerdsm]

Здравствуйте, подключаю к сайту шрифт Lobster, который доступен через googlefonts. Мне нужны только кириллические символы, но настроить (снять галочку) с варианта Latin не представляется возможным. Подключить шрифт предлагается следующим методом:

<style>
@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic');
</style>

Если перейти по ссылке, то будет представлен css-файл, в котором происходит подключение шрифтов:

/* cyrillic */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v18/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v18/RdfS2KomDWXvet4_dZQehvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v18/9NqNYV_LP7zlAF8jHr7f1vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v18/cycBf3mfbGkh66G5NhszPQ.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;
}

Может быть, лучше тогда вообще подключить через @font-face?

/* cyrillic */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v18/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

Comments

[sergey]

что значит вам нужны кирилические шрифты? чем вам мешает латиница?

Answer 1

[sergey]

<link href="https://fonts.googleapis.com/css?family=Lobster&amp;subset=cyrillic" rel="stylesheet">
font-family: 'Lobster', cursive;

и не морочьте голову

Answer 2

[dom1n1k]

То, что GF отдал css-файл с кучей языков, включая вьетнамский - это нормально.

Дело в том, что современные браузеры умеют определять, символы из каких юникод-диапазонов реально есть в документе. И в зависимости от этого грузить или не грузить нужный файл. Поэтому ручное указание языка для них потеряло смысл. Браузеру нужно просто дать ссылки на все имеющиеся языковые версии, а он уже сам разберется, что качать, а что нет.

А GF, в свою очередь, определяет какой браузер у клиента и отдает ему такую версию css, которая максимально подходит. Если зайти со старого браузера - там уже не будет "лишнего", будет только то, что указано по ссылке.

В свое время эта фича убила у меня несколько часов отладки:
Почему может не работать знак рубля в iOS?
Это был момент, когда Хром уже поддерживал автовыбор субсетов, а Сафари - ещё нет. Соответственно моя ошибка проявлялась только на Сафари и оттого казалась глюком.

Короче, всё нормально, оставь GF в покое.