Использование нестандартных шрифтов на сайте WordPress

Использование нестандартных шрифтов на сайте @font-face

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

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

Подключение нестандартных шрифтов с помощью CSS

Для того чтобы использовать нестандартный шрифт на сайте, нужно его скачать. Я нашел вот такой отличный каталог шрифтов для сайта. Там вы сможете найти и скачать необходимый вам шрифт. Хотелось бы заметить, что существует несколько форматов шрифтов. Для подключения шрифта с помощью CSS советую скачивать шрифт в формате ttf.

Если вы уже нашли и скачали шрифт, то уже можно подключить шрифт к сайту. Для этого загрузите файл шрифта по 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.