Как подключить шрифт на сайт, шрифты Google Fonts
Когда выбран нужный шрифт для сайта, остается только его подключить и задать нужные размеры для текста у различных элементов страницы. Подключение шрифта на сайт осилит даже начинающий разработчик, если следовать простой инструкции.
Шрифт может использоваться стандартный или сторонний. Если сторонний, тогда прежде чем его использовать, нужно добавить его на страницу сайта при помощи специального кода подключения.
Как задать шрифт для нужного элемента страницы? Для этого есть специальное свойство из семейства font – font-family. Пример задания шрифта приводится ниже:
.class {
font-family: verdana, arial, tahoma, 'sans-serif';
}
В примере видно, что можно перечислить несколько шрифтов через запятую, в таком случае, если указанного шрифта не будет найдено в системе пользователя, тогда будет использован следующий шрифт из перечисленных.
Лучше конечно не использовать стандартные шрифты, так как в таком случае сайт будет выглядеть не очень современно. Гораздо лучше подобрать красивый шрифт для сайта в специальном сервисе, например, в Google Fonts.
Google Fonts предлагает большое количество бесплатных шрифтов. Это удобный сервис, который позволяет сразу посмотреть, как будет выглядеть нужный шрифт, есть возможность изменять размеры и гарнитуры при предварительном просмотре. Когда нужный шрифт выбран, достаточно получить код для интеграции его на сайт.
Можно также предварительно настроить шрифт: выбрать нужные стили начертания и языки. Рекомендуется выбирать только самые необходимые стили начертания, чтобы это не сильно влияло на скорость загрузки сайта в общем.
Также можно загрузить шрифт с Google Fonts и подключить его локально. Для этого следует навести на значок загрузки в верхнем правом углу открывшегося окна. Это может пригодиться в некоторых случаях.
Последние статьи
- 09.07.22ИТ / Разное Конвертация офисных файлов DOC, DOCX, DOCM, RTF в форматы DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT без потерь и изменения разметки
- 07.07.22ИТ / Безопасность Как защитить исходный код PHP, JS, HTML, CSS - обфускация, минимизация, сжатие и шифрование
- 06.07.22ИТ / Безопасность Подключение не защищено, проблема с Lets Encrypt - как исправить истекший 30.09.2021 DST Root CA X3, удалить его вручную и установить ISRG Root X1. Пример на MS Windows 7
- 08.07.21ИТ / Разное Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- 06.07.21ИТ / Разное Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку