Главная » Статьи » Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

От автора: я не думаю, что это часто встречаемая болезнь или что-то подобное, но я видел, как это делали несколько раз и даже настаивали на этом. Вот, что я имею в виду…

Когда вы решаете сделать подключение шрифтов font face, то переходите в Google Fonts и выбираете шрифт, например, Open Sans, и он дает вам либо ссылку <link>, либо @import с URL-адресом, по которому должен быть готов шрифт для использования на вашем сайте.

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Вы можете заглянуть туда и посмотреть, что он вернет …

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Разумеется, это всего лишь несколько объявлений шрифта @font-face!

Теперь в дело вступает ваш разум, ориентированный на производительность. Подождите. Итак, я выполняю один HTTP-запрос для этой таблицы стилей, а затем она выполняет другие HTTP-запросы для этих файлов woff2, которые она привязывает. Среднестатистический пользователь мог бы подумать — почему бы просто не скопировать эти блоки шрифтов прямо отсюда и не использовать их.

Можно и так! Но!

Проблема в том, что здесь Google придумывает разные причудливые гугловские вещи, и содержимое этой оригинальной таблицы стилей изменяется на основе запроса браузера. Снимок экрана выше взят из Chrome 66. А вот Firefox 20 на Windows 7:

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Все по-другому! Здесь только woff, а не woff2. Если мы откроем этот URL-адрес в IE 8, мы получим блок @font-face, включающий формат eot!

Дело в том, что то, что дает этот URL-адрес очень специфичным для того, что нужно текущему браузеру. Это довольно крутая вещь. Если новые браузеры имеют новые форматы и им нужен новый синтаксис CSS, это будет довольно просто сделать.

Не то, чтобы Google Fonts идеально подходил для этих вещей. Например, не контролируя собственные блоки шрифтов @font-face, вы не можете воспользоваться преимущества font-display, что, конечно, не есть хорошо. Может быть, мы когда-нибудь сможем это сделать, или, может быть, стоит разместить на своем сервере Google Fonts, и это еще одна вещь, о которой мы когда-нибудь подробно расскажем.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.