Как добавить пользовательские шрифты в WordPress …

Если содержание король, то типографика может быть одежда короля (или замок, если хотите). Поскольку шрифт – это то, что люди видят в 99% случаев, вам может понадобиться что-то, что выделяется из того же скучного старого Arial и Times New Roman. Существуют сотни веб-шрифтов, которые вы можете использовать бесплатно, чтобы оживить вашу типографику. В этой статье будут обсуждаться варианты включения пользовательских шрифтов в WordPress, а также общие подводные камни (и решения), которые несут пользовательские шрифты.

Ручное редактирование

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

"Вахх, но это сложно, и я не знаю, как это сделать!"

Ерунда! Это займет всего около 5 минут и легко, как торт. Кроме того, что круче, чем быть 1337 h4x0r, который может самостоятельно кодировать такие простые вещи? Узнав, как это сделать, вы сможете быстро и самостоятельно вносить другие небольшие изменения (вместо того, чтобы платить кому-то за это).

Вот как вручную добавить веб-шрифты в вашу тему:

1. Получить ссылку из веб-источников Google

Прежде всего, перейдите в Google Fonts и получите ссылку для вставки выбранного шрифта. Вы должны нажать вторую кнопку в поле рядом с кнопкой «Добавить в коллекцию». Кстати, этот метод подходит для других платформ веб-шрифтов, которые мы перечислим чуть позже.

2. Отредактируйте ваш файл functions.php

Далее мы отредактируем файл functions.php, чтобы WordPress включил стиль шрифта в заголовок сайта. Войдите в редактор тем, перейдя в внешний вид вкладка и нажав на редактор, Выберите файл functions.php. Добавьте этот бит кода в конец:

add_action( 'wp_enqueue_scripts', 'custom_google_fonts' );
function custom_google_fonts() {
wp_enqueue_style( 'custom-font', "//fonts.googleapis.com/css?family=Open+Sans");
}

Конечно, вы должны заменить бит URL Open Sans выбранным шрифтом. Чтобы включить несколько шрифтов одновременно, добавьте | а также разделитель

wp_enqueue_style( 'custom-font', "//fonts.googleapis.com/css?family=Open+Sans|Lato");

3. Наконец, вы должны отредактировать ваш style.css, чтобы включить соответствующее семейство шрифтов.

Теперь, когда ваша тема имеет соответствующий шрифт в заголовке, вы хотите отредактировать таблицу стилей так, чтобы элементы вашей темы фактически использовали новый шрифт. Лучший способ отредактировать style.css – использовать дочерние темы. Вы также можете редактировать без такового, но учтите, что ваш style.css будет перезаписываться при каждом обновлении темы, поэтому вам придется делать это снова.

Предположим, вы хотите изменить шрифт тела. Что вам нужно сделать, это пойти Внешний вид -> Редакторвыберите style.css и найдите с помощью сочетания клавиш CTRL + F элемент «body» и измените (если вы редактируете основную тему) или добавьте (если это новая вторичная тема) этот бит:

body {
    font-family: 'Open Sans', sans-serif;
}

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

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

Например, давайте сделаем это с элементом на нашей собственной странице, который говорит "Блог" …

А затем получить имя класса из окна инспектора …

В этом случае элемент . Название сайта

Затем все, что вам нужно сделать, это отредактировать или добавить это имя класса в таблицу стилей темы.

Кстати, если вы хотите создать отдельную страницу или элемент публикации, у которого нет определенного класса (например, вы хотите, чтобы определенный заголовок или абзац в одном сообщении имели другой шрифт), вы можете легко сделать это, когда «переписываете Публикация с использованием текстового редактора (доступ осуществляется по вкладке рядом с «Визуальным»).

Что вы делаете, это просто добавляете стиль так:

This headline looks totally different from the rest

Или укажите пользовательский класс …

This headline looks totally different from the rest

И определите это в вашем style.css

.customheadline {
    font-family: 'Open Sans', sans-serif;
}

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

Встроенная поддержка тем

Конечно, мы понимаем, что не все захотят редактировать файлы тем. Из-за этого мы начали включать эту опцию в некоторые из наших новых тем, например, в Megalith. Щелкнув вкладку «Типографика» на панели параметров темы, вы можете изменить семейство, цвет и размер шрифта, а также индивидуально для ссылок и заголовков (не показано на скриншоте).

Megalith также поставляется с плагином Visual Composer, который позволяет вам определять пользовательские классы для элементов в визуальном редакторе, среди других функций.

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

Поддержка плагинов

Хорошо, по некоторым причинам, вы не хотите добавлять шрифты самостоятельно. Есть еще варианты? Да, аксессуары.

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

Простые Google Шрифты

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

Typekit шрифты

Если вы хотите использовать шрифты Typekit, это плагин, чтобы сделать это. У Typekit есть бесплатный тариф и несколько платежей, если вы планируете использовать их в коммерческих целях. Вы также должны создать учетную запись на своем сайте для доступа к источникам. Хорошо, если вы хотите включить такие шрифты, как Futura, PT Sans и другие популярные типы известных литейных заводов.

Веб-шрифты

Еще один плагин, созданный для интеграции с другим поставщиком веб-шрифтов, на этот раз – Fonts.com. Он также имеет интеграцию с веб-шрифтами Google. Как и в случае плагина TypeKit, вам необходимо создать учетную запись, чтобы использовать этот плагин.

Используйте любой шрифт

Этот плагин позволяет загружать любой пользовательский шрифт с расширением * .ttf, * .otf или * .woff. У разработчика также есть платная опция, которая преобразует не-веб-шрифты в веб, что означает, что вы можете использовать шрифты, которые даже не доступны в Интернете (хотя обязательно проверьте лицензию).

Другие веб-библиотеки шрифтов

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

Adobe Edge Web Fonts – Более 500 бесплатных веб-шрифтов, которые вы можете использовать на своем сайте. Посмотрите этот урок о том, как использовать их с WordPress.

Squirrel Fonts – Многие качественные шрифты, которые можно бесплатно использовать в коммерческих целях. Загрузите с плагином Используйте любой шрифт.

Открытая библиотека шрифтов: 610 семейств шрифтов, в основном бесплатных для использования на основе лицензии.

Недостатки использования пользовательских шрифтов

Пользовательские шрифты могут быть хорошими, но есть несколько недостатков, о которых следует знать.

Не все источники имеют диакритическую поддержку.

Если вы пишете не на английском языке, вам нужно проверить, поддерживает ли шрифт этот скрипт. Лучший способ проверить с помощью Google шрифтов – это зайти на сам сайт и использовать функцию предварительного просмотра, чтобы увидеть, отображаются ли какие-либо специальные символы. Другой трюк заключается в использовании функции упорядочения сценариев для перехода непосредственно к шрифтам, поддерживающим ваш язык.

Слишком много пользовательских шрифтов может замедлить время загрузки вашего сайта

Рекомендуется, чтобы на одном сайте одновременно не было более 2-3 пользовательских шрифтов. С каждым новым пользовательским шрифтом, который вы добавляете, браузер пользователя должен пропинговать внешние серверы, чтобы получить их. Это может увеличить время загрузки, а также может привести к замедлению просмотра, так как они должны быть загружены в память.

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

Отключите шрифты, которые вы не используете. Сделайте это с помощью функциональности темы, плагина нестандартного шрифта или путем индивидуального изменения файлов темы. Если вы собираетесь сделать это вручную, строка, которую вы хотите найти в файлах темы (обычно functions.php), wp_enqueue_style который включает в себя URL-адрес Google Fonts и комментировать его (или удалить его). Другой способ, которым темы включают шрифты, – через ключевое слово @import в файле таблицы стилей (style.css), так что ищите его тоже.

округление

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

У вас есть любимый тип шрифта или пара шрифтов, которые вы используете на своем сайте? Дайте нам знать в комментариях.