Конечно, всегда есть вариант подключить шрифт с сервиса Google Fonts и это очень просто — копируешь ссылку, подключаешь к html-файлу и «вжух»! Всё работает.
Но этот способ подходит не всегда, иногда приходится подключать шрифт локально, скачивать, разархивировать и подключать из папки.
Не забудь поставить лайк, чтобы я понимал, что вам это интересно.
Распакованный архив с шрифтами содержит файлы с разными расширениями, например, такие как name.woff2, name.otf, name.ttf.
И сразу же возникает вопрос, как этим пользоваться?
Начнём с самого правила, @font-face — это не подключение файла шрифта буквально, а описание конкретного набора всех свойств, которые описывают шрифт для загруженного файла.
А теперь давай рассмотрим по шагам, что нужно сделать:
Шаг 1. Объявляем @font-face для базового шрифта
- Указываем путь до файлов в src их формат (форматы легко можно нагуглить по расширению, главное для каждого файла устанавливать его формат).
- Размер шрифта, жирность и другие настройки - их все мы указываем сразу при объявлении.
Шаг 2. Описываем и другие варианты шрифта, например, для заголовков
С ними мы проделываем всё тоже самое, только со своим начертанием и жирностью.
Шаг 3. Используем подключенный шрифт в стилях
Например, нужно установить для класса title жирный шрифт, берём имя шрифта, который указали в разделе @font-face для font-family.
А также и другие настройки, такие как жирность/начертание, их мы указываем еще раз для самого элемента, таким образом будет применён именно тот файл, который был подключен для этой группы стилей.
И конечно же, не забываем указывать стандартные стили для font-family через запятую: font-family: MyriadPro, sans-serif;
Если сторонний шрифт не будет загружен, то на сайте будет использоваться стандартный шрифт, который мы как раз указали через запятую.
Если в дизайне нет такого шрифта, то можно выбрать наиболее похожий на шрифт из макета.
Теперь ты знаешь как подключить локальный шрифт к своему сайту. Остались вопросы? Задавай в комментариях.
И читай мою статью, если пропустил: «Верстка сайтов: 5 частых проблем при работе с макетами и варианты их решения».