Нестандартные шрифты на сайте - подключаем с помощью CSS - @font-face
Опубликовано: 02.09.2018
Вообще, хотелось бы сказать, что использование нестандартных шрифтов на сайте - крайне не желательно. И пичкать сайт всеми шрифтами из Photoshop - грубая ошибка дизайнера, которая указывает на его неопытность, как мне кажется. Сайт красивее от этого совсем не становится, но зато вылезают сложности с отображением шрифтов в разных браузерах. Способ подключения нестандартного шрифта на сайт, который я опишу ниже хорош тем, что он отлично работает в популярных браузерах.
Недавно взялся верстать шаблон для WordPress по заказу, и как раз, столкнулся с проблемой внедрения нестандартных шрифтов на сайт. Хотя задача не столь сложная, как как мне показалось на первый взгляд, но потратил я немало времени на поиски ее решения. На самом деле, как выяснилось, есть сразу несколько способов подключить нестандартный шрифт на сайт , но самым эффективным и простым в моем случае оказался способ подключения шрифта к сайту с помощью CSS.
Основы CSS - #6 - Использование шрифтов.
Для того чтобы использовать нестандартный шрифт на сайте, нужно его скачать. Я нашел вот такой отличный каталог шрифтов для сайта . Там вы сможете найти и скачать необходимый вам шрифт. Хотелось бы заметить, что существует несколько форматов шрифтов. Для подключения шрифта с помощью CSS советую скачивать шрифт в формате ttf .
Как подключить шрифты CSS на сайт
Если вы уже нашли и скачали шрифт, то уже можно подключить шрифт к сайту. Для этого загрузите файл шрифта по ftp на сайт , например в папку вашей темы. Затем в папке вашей темы найдите файл style.css и откройте его для редактирования. Добавьте следующий код в ваш файл style.css и отредактируйте.
@font-face { font-family: Archangel; /* имя шрифта для CSS правил */ src: local("Archangel"), /* проверяем наличие шрифта в ОС пользователя */ url(/wp-content/themes/mytheme/42852.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */ }Я думаю стоит немного пояснить этот код.
font-family: Archangel;Этой строкой вы задаете правило для CSS, с помощью которого вы сможете в дальнейшем назначить определенному элементу нужный вам шрифт.
src: local("Archangel"),Эта строка проверяет наличие шрифта в операционной системе пользователя, и если шрифт отсутствует, то шрифт подгружается из папки вашей темы.
url(/wp-content/themes/mytheme/42852.ttf);Эта строка указывает путь к файлу шрифта для его загрузки на машину пользователя. Естественно, что 42852.ttf - это имя файла шрифта с расширением. Расширение указывать обязательно.
Таким образом вы подключите нестандартный шрифт к сайту. Затем его просто нужно будет использовать как обычно для любых текстовых элементов сайта. Пример покажу ниже.
h1 { font-family: Archangel; }Таким образом, все заголовки H1 на вашем сайте будут отображаться шрифтом Archangel. Точно так же вы можете назначить нестандартный шрифт для любого другого элемента вашего сайта с помощью правил CSS.
Вот такой простой способ подключения нестандартных шрифтов на сайт. Я встречал несколько других способов, в том числе и с использованием JavaScript, но ни один другой мне не понравился. А с помощью CSS я быстро и легко смог использовать нестандартный шрифт на сайте WordPress.
Подписывайтесь и получайте полезные статьи на почту!