Войти

Автор: admin

Подключение шрифтов к проекту

Posted on by admin

Для чего нужно подключать шрифты

У всех компьютеров есть определенное количество встроенных шрифтов. Например,Arial и Times New Roman - это классические шрифты, которые используются на многих сайтах и отображаются без проблем.

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

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

Шрифты можно подключить двумя способами:

  1. Воспользоваться сервисом fonts.google.com и не скачивая шрифт подключить путь к нему
  2. Скачать шрифт и положить его в папку с проектом, так же, как мы поступаем с изображениями

Давайте рассмотрим оба варианта.

Подключения шрифта через сервис Google

Заходим на сайт fonts.google.com

Если вы хотите найти какой-то интересный шрифт для себя, то можете воспользоваться фильтрами

Нажмите кнопку "Filters"

В открывшейся левой панели выберите нужные настройки. Например, вам нужно, чтобы текст поддерживал русскую раскладку (Кириллицу).

В разделе "Language" (Язык) напишите "Cyrillic"

В разделе фильтров можете смело экспериментировать в поиске интересных шрифтов.

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

В поисковой строке набираем название нужного нам шрифта - "Roboto"

Выбираем первый классический вариант.

Кликаем на шрифт и нас перекинет на страницу с настройками шрифта.

Выбираем нужные нам настройки "Cyrillic" "Russian"

И видим разные размеры шрифта и как они будут отображаться на сайте.

Значение font-weight пишется над каждым размером (ExtaLight 200, Light 300, Regular 400 и тд)

Далее, в правом верхнем углу ищем синюю кнопку "Get font"

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

С правой стороны ищем кнопку "<> Get embed code"

Нам покажет множество разных настроек для подключения шрифта.

Сейчас нас интересует только "Web" версия, которую мы можем подключить в раздел <head> в нашем HTML-файле.

Можно нажать на иконку "Copy code" и вставить в HTML-файл скопированный код.

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

Но в случае со шрифтом "Roboto" у него достаточно много начертаний и CSS-стилей. Можно заметить, что каждый класс описывает своё начертание, поэтому при работе с CSS мы оставим только необходимые нам начертания: Bold и Regular.

Так же тут не стоит копировать весь текст. Достаточно скопировать только необходимые настройки. Код немного нужно будет доработать, чтобы не было ошибок:

CSS
Код скопирован в буфер обмена copy

font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal;

Шрифт в статье до подключения кода "Arial"

Добавим нужный CSS код.

Подключенный шрифт мы можем увидеть в правом нижнем углу в разделе "Шрифт".

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

Установка шрифтов внутри проекта

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

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

Искать шрифты можно на специализированных сайтах:

https://fonts.google.com/

https://webfonts.pro/

https://fonts-online.ru/

https://fontstorage.com/

и т.д. Сайтов со шрифтами довольно много. Главное помните, про авторские права.

Посмотрим на примере того же шрифта "Roboto"

На сайте fonts.google в корзине, откуда вы ранее копировали код шрифта для HTML и CSS найдите кнопку "Download all"
Скачайте архив и распакуйте его. Внутри распакованной папки вы увидите много файлов. Нас интересуют шрифты с начертанием Bold и Regular.
Как мы уже знаем название шрифтов (Medium, Bold, SemiBold и тд) отвечают за жирность шрифта:
font-weight:
Super - 900
Black - 800
Bold - 700
SemiBold - 600
Medium - 500
Regular - 400
Light - 300
ExtraLight - 200
Thin - 100
Не все шрифты поддерживают все варианты жирности.
Так же обратим внимание на то, что формат файла шрифта сейчас .ttf
В современных браузерах чаще всего наибольшую техническую поддержку получил формат шрифта woff2 , поэтому сконвертируем наш шрифт в новый формат.
Для конвертации есть множество сервисов в интернете, мы можем воспользоваться сайтом: https://cloudconvert.com/
Загрузите туда файл со шрифтом, сконвертируйте его и скачайте шрифт в новом формате .woff2
Для того чтобы шрифты работали правильно их нужно скопировать в проект, в соответствующую папку. Обычно эта папка так и называется "fonts"
В файле CSS пишем структуру кода:
CSS
Код скопирован в буфер обмена copy

@font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Bold.woff2);
}

В font-family пишем название шрифта. Его мы будет в дальнейшем использовать в свойствах для назначения шрифта в разных классах.
в src пишем путь до шрифта (по аналогии с путями до изображений).
Для того чтоб браузер точно считывал толщину шрифта мы можем прописать font-weight когда подключаем шрифт:
CSS
Код скопирован в буфер обмена copy

@font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Bold.woff2);
font-weight: 700;
}

Когда подключаем шрифт можно выбрать самый распространенный шрифт в макете и подключить его к <body> , а другие шрифты переназначать в их классах. Через запятую после подключенного шрифта, пишем классические шрифты, на случай, если браузер по какой-то причине не сможет загрузить первый шрифт. Не обязательно писать все три шрифта, иногда достаточно просто добавить sans-serif, Arial или Helvetica.

Подключение шрифтов к статье про Lego

После того как мы скачали и сконвертировали шрифты Bold  и Regular нам нужно корректно подключить их к статье.

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

  • в файле HTML в разделе <head> не должно быть лишних тегов, подключающих шрифты

  • в папке проекта статьи про Lego создана отдельная папка "fonts" и в ней лежит два файла с шрифтом Roboto Bold и Rugelar в формате .woff2

  • в CSS-файле подключено два шрифта с соответствующим им font-weight

  • Семейство шрифтов font-family используется первым, в стилизации body

  • При исследовании сайта браузер подгружает нужный шрифт