4 советов экспертов для максимально эффективного использования шрифтов Google

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

Несмотря на то, что затраты на лицензирование остались нулевыми, библиотека шрифтов Google неуклонно росла как по количеству, так и по качеству, и Google взяла на себя ответственность как за авторские права, так и за инфраструктуру. Более того, реализация шрифтов Google требует минимальной работы с вашей стороны, поскольку их волшебные серверы решают многие хитрые проблемы, которыми мы привыкли управлять сами.

Мы, вероятно, принимаем это как должное сегодня, но легко забыть, как трудно, хакерски и дорого обходилось использование нестандартной типографии на вашем сайте. Еще раз ознакомьтесь с « sIFR », если хотите быстро вспомнить, через что мы проходили.

Имея в своем распоряжении такой полезный ресурс, имеет смысл извлечь из него максимальную пользу. В этой статье я хотел бы представить четыре совета, которые помогут вам использовать шрифты Google в качестве профессионала.

Совет № 1: запрос нескольких шрифтов в одном запросе

Использование различных шрифтов в заголовке и тексте абзаца часто может улучшить читаемость. Однако мы также знаем, что запрос большого количества небольших файлов с сервера значительно медленнее, чем запрос одного большого файла.

Таким образом, вместо того, чтобы запрашивать каждый шрифт отдельно, выгодно объединять эти множественные запросы шрифтов в один. В качестве примера, скажем, вы хотите загрузить два шрифта — Lato и Raleway. Правильный способ загрузки шрифтов:

<link href='https://fonts.googleapis.com/css?family=Lato|Raleway' 
rel='stylesheet' 
type='text/css'>

Хотя это и не влияет на общее количество загруженных битов, количество HTTP-запросов сокращается, и было доказано, что это улучшает время загрузки страницы. Чем больше шрифтов вы используете, тем больше потенциальная экономия — хотя есть и другие веские причины для ограничения количества используемых вами внешних шрифтов.

Кроме того, этот метод делает код более лаконичным и читабельным. Вам нужно только взглянуть на одну строку, чтобы понять все шрифты, которые запрашивает ваша веб-страница.

Совет № 2: Укажите стили шрифта и подмножества скриптов

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

Вот пример:

 <link href='https://fonts.googleapis.com/css?family=Lato:i|Raleway:b' 
rel='stylesheet' 
type='text/css'>

Вы также можете использовать bi

Если вам нужен другой вариант жирного шрифта, вы можете использовать числовой вес. Raleway, например, имеет четыре варианта жирного шрифта с весом 600 700 800 и 900. Чтобы запросить ультра жирный шрифт, вам нужно позвонить:

 <link href='https://fonts.googleapis.com/css?family=Raleway:900' 
rel='stylesheet' 
type='text/css'>

Если вас не устраивают сокращения, вы можете указать полное имя стиля шрифта, как я сделал в следующем примере:

 <link href='https://fonts.googleapis.com/css?family=Lato:300italic' 
rel='stylesheet' 
type='text/css'>

В этом случае вместо загрузки обычного курсивного шрифта мы загружаем облегченную версию.

 <link 
href='https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek' 
rel='stylesheet' 
type='text/css'>

 <link href='https://fonts.googleapis.com/css?family=Raleway&text=SitePoint' 
rel='stylesheet' type='text/css'>

 <link href='http://fonts.googleapis.com/css?family=Monoton&effect=neon' 
rel='stylesheet'
/>