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

Опубликовано: 2019-04-04

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

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

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

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

Затем мы покажем вам, как добавить пользовательские шрифты WordPress из:

  • Google шрифты
  • Adobe Fonts (Typekit)
  • Буквально где угодно! (загрузив файл шрифта и используя CSS3 @ font-face)

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

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

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

После Google Fonts еще одним широко известным вариантом является Adobe Fonts ( ранее называвшееся Typekit ). Шрифты Adobe включены без дополнительной платы как часть подписки Adobe Creative Cloud, но недоступны для тех, кто не подписался.

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

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

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

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

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

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

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

  • FontPair
  • Fontjoy
  • Typ.io

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

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

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

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

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

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

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

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

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

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

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

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

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

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

шрифты wordpress 1

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

шрифты wordpress 2

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

шрифты wordpress 3

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

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

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

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

шрифты wordpress 4

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

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

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

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

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

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

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

шрифты wordpress 5

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

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

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

шрифты wordpress 6

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

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

Wordpress шрифты 7

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

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

шрифты wordpress 8

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

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

шрифты wordpress 9

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

h2 {

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

}

шрифты wordpress 10

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

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

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

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

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

Wordpress шрифты 11

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

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

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

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

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

шрифты wordpress 12

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

шрифты wordpress 13

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

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

шрифты wordpress 14

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

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

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

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

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

шрифты wordpress 15

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

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

шрифты wordpress 16

После того, как вы загрузили файлы, перейдите в « Внешний вид» → «Настройка» → «Дополнительные 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: нормальный;

}

шрифты wordpress 17

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

шрифты wordpress 18

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

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

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

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

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

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