Как добавить пользовательские шрифты WordPress (и выбрать шрифты, которые сочетаются)

Ищете способ добавить на сайт свой собственный шрифт в WordPress?

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

В этом посте вы узнаете, как загрузить и использовать любой выбранный шрифт в WordPress несколькими разными способами.

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

Затем мы покажем вам, как добавить собственный шрифт WordPress, будь то шрифт Google, шрифт Adobe (ранее называвшийся шрифтом Typekit) или буквально любой другой.

Щелкните эту ссылку, чтобы перейти прямо к обучающим материалам.

Узнайте, как публиковать за секунды, а не часы

Зарегистрируйтесь сейчас, чтобы получить эксклюзивный доступ к Wordable, а также узнать, как загружать, форматировать и оптимизировать контент за секунды, а не часы.

Начать публикацию

Где найти пользовательские шрифты для WordPress

Самым известным местом для поиска пользовательских шрифтов WordPress, безусловно, является Google Fonts.

В Google Fonts вы найдете репозиторий из более чем 900 шрифтов, все из которых бесплатны и очень легко интегрируются на ваш сайт WordPress благодаря CDN от Google.

Еще один известный вариант - Adobe Fonts.

Adobe Typekit Web Fonts предлагает тысячи красивых шрифтов, которые можно быстро добавить в любой из ваших веб-проектов.

Они включены без дополнительной платы как часть подписки Adobe Creative Cloud, но недоступны для тех, кто не подписался.

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

• Font Squirrel - собирает шрифты, которые на 100% бесплатны для коммерческого использования.
• Fonts.com - имеет большую коллекцию премиальных шрифтов.

Как сочетать шрифты, чтобы ваш сайт выглядел великолепно

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

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

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

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

• FontPair
• Fontjoy
• Typ.io

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

Как добавить собственные шрифты WordPress: пошаговые инструкции

А теперь самое интересное - вот как начать использовать свой собственный шрифт в WordPress.

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

Вот три метода, которые мы рассмотрим. Опять же, вы можете щелкнуть ссылку, чтобы сразу перейти к конкретному руководству:

• Добавить шрифты Google в WordPress (плагин, руководство или методы локального хостинга)
• Добавить шрифты Adobe (Typekit) в WordPress
• Используйте CSS3 @ font-face для загрузки и добавления любого шрифта в WordPress

Как добавить шрифты Google в WordPress

Поскольку Google Fonts - самый популярный источник пользовательских шрифтов WordPress, мы рассмотрим три различных способа добавления шрифтов Google в WordPress:

• Добавить шрифты Google из CDN Google с помощью плагина
• Вручную добавить шрифты Google из CDN Google
• Разместите Google Fonts локально в WordPress с помощью плагина

Как добавить шрифты Google в WordPress с помощью плагина

Из-за популярности Google Fonts вы можете найти несколько качественных плагинов, которые упрощают добавление Google Fonts в WordPress. Нашим любимым является Easy Google Fonts, потому что он:

• Бесплатно
• Легкий
• Легко использовать

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

Затем нажмите на опцию Typography, чтобы выбрать параметры Google Fonts:

Оттуда вы можете использовать параметры, чтобы выбрать собственный шрифт для каждого элемента на вашем сайте:

Например, вот как выглядит изменение шрифта абзаца:

Помимо выбора самого шрифта, плагин также позволяет настраивать:

• Толщина шрифта
• Оформление текста
• Цвет шрифта

Если вы немного разбираетесь в CSS-коде, вы также можете использовать функцию Font Controls плагина для группировки определенных элементов. Например, вы можете комбинировать селекторы заголовков, чтобы настроить таргетинг на все заголовки сразу.

Чтобы настроить это, перейдите в Настройки → Google Fonts и создайте новый элемент управления шрифтом, чтобы настроить таргетинг на определенные селекторы CSS:

Как добавить шрифты Google в WordPress без плагина

Поскольку Google размещает все свои шрифты на собственном CDN, также довольно легко вручную добавить шрифты Google в WordPress.

По сути, вместо того, чтобы загружать файлы шрифтов на свой сервер, вы можете просто установить ссылку на CDN, размещенный в Google, и Google позаботится об обслуживании шрифтов за вас.

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

Для начала вам нужно использовать веб-сайт Google Fonts, чтобы выбрать шрифт, который вы хотите добавить.

В этом примере предположим, что вы хотите использовать Roboto.

Перейдите на страницу шрифта и нажмите + Выбрать этот шрифт:

В правом нижнем углу появится окно. Щелкните, чтобы развернуть это окно.

Если вы хотите выбрать дополнительную толщину шрифта (например, для полужирного и курсивного), вы можете перейти на вкладку «Настроить». Для достижения оптимального баланса между удобством использования и производительностью мы рекомендуем выбрать максимально три толщины шрифта:

• Обычный
• Курсив
• Смелый

Вы даже можете использовать меньше, если хотите максимальную производительность.

После того, как вы сделали свой выбор, вернитесь на вкладку Embed и скопируйте код Embed Font:

Затем вам нужно добавить этот код в раздел вашей темы WordPress. Вы можете сделать это:

• Непосредственное редактирование файла header.php вашей дочерней темы (убедитесь, что вы используете дочернюю тему - в противном случае ваши пользовательские шрифты исчезнут при обновлении темы)
• Использование бесплатного плагина, такого как Insert Headers and Footers

После того, как вы добавили код, вы можете начать использовать шрифты Google в своем CSS.

Если вы вернетесь на сайт Google Fonts, Google фактически сообщит вам правила CSS, которые вам нужно использовать:

Например, чтобы ваши теги h2 использовали ваш новый шрифт Roboto, вы можете перейти в Внешний вид → Настроить → Дополнительный CSS и добавить следующий фрагмент:

h2 {

семейство шрифтов: «Робото», без засечек;

}

Как разместить шрифты Google локально в WordPress с помощью плагина

Вот последний метод для Google Fonts!

Некоторые люди предпочитают размещать шрифты Google локально, а не загружать их из CDN Google. То есть, вместо того, чтобы загружать их по ссылке вроде «https://fonts.googleapis.com/css?family=Roboto:400,700», вы можете разместить файлы на своем собственном сервере.

Самый простой способ сделать это - использовать бесплатный плагин CAOS for Webfonts.

После установки и активации плагина вы можете перейти в Настройки → Оптимизировать веб-шрифты, чтобы выбрать, какие шрифты вы хотите загрузить на свой сервер:

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

Как добавить шрифты Adobe (Typekit) в WordPress

Если вы хотите использовать Adobe Fonts в WordPress, вы можете выполнить те же действия, что и ручной метод Google Fonts. Помните, что служба Adobe Fonts доступна только в рамках подписки Creative Cloud.

Для начала вам необходимо использовать веб-сайт Adobe Fonts для выбора шрифта и создать веб-проект (подробные инструкции см. Здесь).

В окне Добавить шрифты в веб-проект вы можете выбрать, какие шрифты включать:

Затем Adobe предоставит вам код для встраивания, как в Google Fonts:

Возьмите этот встроенный код и добавьте его на свой сайт с помощью файла header.php вашей дочерней темы или плагина, такого как Insert Headers and Footers.

После связывания с файлом CSS вы можете использовать код CSS, который предоставляет Adobe, чтобы начать применять шрифт к селекторам CSS на вашем сайте:

Как использовать @ font-face в WordPress

Наконец, последний метод, который мы вам покажем, - это использование @ font-face в WordPress. Этот метод хорош тем, что он работает буквально с любым файлом шрифта из любого источника.

По сути, если вы можете загрузить файл шрифта и иметь права на его использование, CSS3 @ font-face сделает это.

Для начала загрузите файл шрифта из предпочитаемого вами источника. В этом примере мы будем использовать бесплатный шрифт от Font Squirrel под названием Alex Brush.

Если возможно, попробуйте загрузить файл в формате .woff или .woff2 для лучшей кроссбраузерности. Если это невозможно, вы можете загрузить свой шрифт в другом формате, а затем использовать бесплатный инструмент FontSquirrel Webfont Generator, чтобы преобразовать его в .woff:

Затем подключитесь к серверу вашего сайта WordPress через FTP или файловый менеджер cPanel. Потом…

• Создайте новую папку с именем fonts внутри вашей активной темы или каталога дочерней темы (в некоторых темах может уже быть папка шрифтов. В таком случае вы можете пропустить это).
• Загрузите файл шрифта в папку шрифтов. Вы можете загружать как форматы .woff, так и .woff2.

После того, как вы загрузили файлы, перейдите в «Внешний вид» → «Настройка» → «Дополнительные CSS» на панели инструментов WordPress.

Во-первых, вам нужно использовать @ font-face, чтобы добавить шрифт…

Для этого введите имя вашего шрифта в качестве семейства шрифтов и добавьте прямой URL-адрес к файлу шрифта на вашем сервере в качестве URL-адреса. Вот как это выглядит в нашем примере AlexBrush:

@ font-face {

семейство шрифтов: AlexBrush;

src: url (http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

font-weight: нормальный;

}

Как только вы это сделаете, вы можете использовать CSS для применения вашего семейства шрифтов (по имени, которое вы зарегистрировали с помощью @ font-face). Например, вот как выглядит использование шрифта AlexBrush для заголовков <h2>:

И это все! Вы можете использовать этот метод CSS3 @ font-face буквально для любого файла шрифта.

Заключительные мысли о пользовательских шрифтах WordPress

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

Самый простой способ начать - использовать размещенные бесплатные шрифты в Google Fonts или размещенные премиум-варианты в Adobe Fonts.

Однако вы ни в коем случае не ограничены этими услугами, и, используя CSS3 @ font-face, вы можете загрузить буквально любой файл шрифта в WordPress и начать использовать его в своей теме.

Теперь идите и создайте свою собственную пару шрифтов!