Привет, друзья! В данной статье хотелось бы поговорить о том, как подключить шрифты к вашему сайту.
Подбираем нужный шрифт
Сперва наперво нужно скачать интересующий нас шрифт. Я, как и множество вебмастеров, рекомендую скачивать шрифты Google.
Для этого перейдите по ссылке https://fonts.google.com/ и выберите то, что вам нравится. Мне приглянулся Poiret One и поэтому я скачиваю его.
Подключаем нужный шрифт
Теперь скачиваем шрифт и подключаем его к сайту.
Тут я различаю два подхода:
- Подгрузить шрифт напрямую с сайта Google.
- Подключить шрифт локально, скачав его себе на сайт.
Итак, давайте разберем эти два способа:
Способ 1: Как подключить шрифт Google к сайту?
На сайте Google нажимаем "красный крест", чтобы вышло окно добавления шрифта.
Во вкладке "Embed" мы видим, что Google предлагает два подхода к добавлению шрифта:
- Через вставку кода <link>
- Через вставку медиа команды @IMPORT в файле css темы либо на странице в теге style.
Выбираем оптимальный вариант подключения. Поскольку мне нужно подключить шрифт ко всем страницам сайта, я добавляю медиа запрос в основном файле style.css.
Готово!
Способ 2: Как подключить шрифт к сайту локально?
Теперь давайте разберем, как подключить шрифт к сайту локально, то есть скачав на компьютер, а затем на сервер.
Итак, нам понадобится все тот же Google сайт со шрифтами, но теперь при подключении шрифта перейдем ко вкладке "Customize".
Здесь из списка доступных языков мы можем выбрать те которые наш сайт будет поддерживать. Latin - это латиница (англ.язык, в частности), Cyrillic - кириллица (для русского языка). Обратите внимание на то, что если шрифт не поддерживает кириллицу, то на сайте с русским языком он работать не будет. Также большинство шрифтов поддерживают разные "оттенки" жирного шрифта? курсива и проч. Вы вольны выбрать то, что захотите.
Далее, после того, как выбор сделан, нажимаем на стрелку и скачиваем шрифт.
Переходим в папку темы на сайте и создаем там папку fonts, например. Пускай эта папка содержит все подключенные к теме шрифты.
Извлекаем содержимое архива и закачиваем к себе на сервер в папку fonts.
Пусть каждый шрифт будет сложен в свою папку и иметь адрес типа: /fonts/Poiret One. В папке шрифта содержатся файлы *.tff, отвечающие за отображение его начертания на сайте. В моем случае это оказался один файл PoiretOne-Regular.ttf. Его то нам и нужно подключить.
Переходим в файл css темы и для подключения шрифта к сайту добавляем код:
@font-face {
font-family: Poiret One;
src: url(../fonts/Poiret_One/PoiretOne-Regular.ttf);
}
Будьте внимательны: в пути не должно быть пробелов, заменяйте их символами.
Замечу также что для каждого нового шрифта вам надо создавать новый запрос @font-face.
Готово! Шрифт подключен к вашему сайту и не зависит от google сервисов.
Выводы:
Мы разобрали два доступных способа подключения шрифтов к сайту. Если посчитать, их было даже больше :).
Какой из них использовать - решать вам. Если вы не хотите запорачиваться с кодом и файлами шрифта, то используйте медиа запрос в файле css вашей темы. Если вы не хотите зависеть от google и его сайта шрифтов, то скачивайте и подключайте шрифты локально на ваш сайт.
Если вам понравилась данная статья - ставьте лайк! Делитесь ею в соцсетях, если она была вам полезна. Пишите комментарии, если вам есть что сказать.