Как подключить шрифт на сайт, шрифты Google Fonts

19.09.18 ИТ / CSS 2507

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

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

Как задать шрифт для нужного элемента страницы? Для этого есть специальное свойство из семейства font – font-family. Пример задания шрифта приводится ниже:

.class {
	font-family: verdana, arial, tahoma, 'sans-serif';
}

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

Лучше конечно не использовать стандартные шрифты, так как в таком случае сайт будет выглядеть не очень современно. Гораздо лучше подобрать красивый шрифт для сайта в специальном сервисе, например, в Google Fonts.

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

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

Также можно загрузить шрифт с Google Fonts и подключить его локально. Для этого следует навести на значок загрузки в верхнем правом углу открывшегося окна. Это может пригодиться в некоторых случаях.