Как использовать Google Fonts

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

Вам нужен особый шрифт, который сделает ваш дизайн привлекательным.

Может быть, хороший шрифт, например Slabo, Lato или Raleway.

Google предоставляет в рамках своих многочисленных услуг инструмент под названием Google Fonts, который (на момент написания статьи) поддерживает 992 семейства шрифтов:

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

Обычно я ищу «лучшие шрифты Google» в Google и просматриваю статьи, которые получаю, чтобы понять, как может выглядеть шрифт. Просмотр десятков шрифтов в Google Fonts не идеален для этого, и некоторые сайты упрощают работу с цветами, напримерна этом посте:

Возьмем один из шрифтов, которые я использовал на одном из своих сайтов:Нажмите Start 2P.

Это отличный шрифт для ретро-сайта. Я использовал это в своемКурс веб-платформыдомашняя страница, которой я хотел придать компьютерный вид.

На странице шрифтов вы можете увидеть, как отображается каждый символ:

Прокручивая вниз, вы можете увидеть, кто является дизайнером, и увидеть важную часть: лицензию. В этом случае на странице говорится

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

что дает нам много разрешений.

Мы можем использовать шрифт по своему усмотрению, даже в коммерческом проекте, но не можем его перепродавать.

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

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

Теперь вы можете нажать ссылку «Загрузить семейство» в правом верхнем углу страницы, чтобы загрузить TTF-файл шрифта, который вы можете установить на свой компьютер и использовать его в качестве шрифта в программах на рабочем столе.

Но вам не нужно этого делать, чтобы использовать шрифт на веб-сайте.

Что вы можете сделать, так это нажать «Выбрать этот стиль» рядом с каждым желаемым стилем в разделе «Стили».

Это добавит его на боковую панель Выбранные семейства:

Когда вы закончите с этим, вы нажимаете вкладку «Встраивание», и там вы можете найти код, который вам нужно ввести в свой проект:linkэлемент, чтобы включить шрифт в HTML, и правило CSS для применения семейства шрифтов к определенным элементам:

Итак, в этом случае вам нужно добавить этот HTML:

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

а затем этот CSS:

body { /* use your favorite selector here */
  font-family: 'Press Start 2P', cursive;
}

У нас есть запасной шрифт на тот случай, если шрифт не может быть загружен или загружается слишком долго.

Другой способ добавить шрифт - использовать@importв CSS, поэтому вам не нужно использоватьlinkатрибут в HTML - все находится в файле CSS:

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

Но у этого подхода есть одно ограничение: он медленнее. Если шрифт связан в HTML, браузер сделает запрос к URL-адресу шрифта, как только он прочитает HTML.

Если шрифт связан в CSS, браузер сначала должен сделать запрос на загрузку CSS, а затем он может сделать запрос на загрузку URL-адреса шрифта.

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

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: