Добавление пользовательских шрифтов в WordPress


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


Выбор правильного шрифта для вашего сайта WordPress является центральной частью веб-дизайна и брендинга сайта.

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

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

Мы рассмотрим все, что вам нужно знать о шрифтах WordPress:

  • А) Как добавить пользовательские шрифты в WordPress (вручную)
  • Б) Как добавить пользовательские шрифты в WordPress (через плагин)
  • Зачем использовать пользовательские шрифты на WordPress
  • Где найти пользовательские шрифты
  • Вывод

Contents

А) Как добавить пользовательские шрифты в WordPress вручную

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

1. Использование CSS и @Импортировать

Давайте начнем с наименее рекомендуемого метода. Если вы планируете устанавливать пользовательские шрифты из Google Fonts, вы могли заметить, что на нем есть вкладка с надписью @Импортировать. Сервис дает вам кусок кода CSS.

Вкладка импорта в шрифтах Google

Вы можете взять его как есть и вставить в заголовок (подробнее об этом ниже) или скопировать без >скобки в начале вашей темы (или, еще лучше, дочерней темы) style.css файл.

/ *
Название темы: Двадцать семнадцать детей
URI темы: https://wordpress.org/themes/twentyseventeen/
Шаблон: двадцать семнадцать
Автор: команда WordPress
URI автора: https://wordpress.org/
Версия: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * дополнительный CSS идет сюда * /

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

Причина в проблемах производительности. С помощью @Импортировать больше не является рекомендуемым способом, потому что он не позволяет браузерам загружать несколько таблиц стилей одновременно. Следствие: более медленное время загрузки страницы. Держись подальше от этого, если сможешь.

2. Использование файла шаблона WordPress

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

Убедитесь, что поместили его где-то между а также скобки. Таким образом, ваш шрифт будет загружаться при загрузке страницы.

введите код шрифта Google в заголовок WordPress

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

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

3. Использование @ Шрифт-лицо

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

Для этого сначала нужно скачать соответствующий шрифт. Помните кнопку загрузки в Google Fonts? Тот станет удобным сейчас. Другие провайдеры также позволяют загружать шрифты.

Когда вы это сделаете, убедитесь, что вы получите его в формате веб-шрифта. Это означает TTF, OTF или WOFF. Вы найдете больше информации об этом Вот. Если у вас нет правильного формата веб-шрифта, вы также можете использовать этот сервис конвертировать ваш шрифт в поддерживаемый.

Когда у вас есть готовые файлы шрифтов, вам нужно загрузить их на свой сайт WordPress через FTP. Хорошее место для их хранения - это подкаталог вашей дочерней темы с именем шрифты (креатив, мы знаем).

После этого вам нужно загрузить шрифт в таблицу стилей через @ Шрифт-лицо. Вот как это выглядит:

@ font-face {
семейство шрифтов: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
Вес шрифта: нормальный;
}

Не забудьте заменить название шрифта и адрес его расположения на вашем собственном сайте. После этого ваш новый шрифт станет доступным.

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

4. Ставить в очередь шрифты - «путь WordPress»

Если вы действительно хотите добавить собственные шрифты в WordPress правильным способом, вы будете использовать свой functions.php файл (внутри директории вашей текущей активной темы) и функция  wp_enqueue_script или wp_enqueue_style.

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

Какая разница между wp_enqueue_script а также wp_enqueue_style? Как следует из их названия, один для добавления сценариев, один для таблиц стилей. Какой из них правильно использовать, зависит от того, как ваши пользовательские шрифты предоставляются из их источника.

Например, Google Fonts предоставляет вам шрифты в виде таблиц стилей. В этом случае вы бы добавили их на свой сайт WordPress следующим образом:

function add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

В отличие от этого, шрифты из Adobe Edge Web Fonts поставляются как JavaScript. Поэтому, чтобы поставить их в очередь на вашем сайте, код будет выглядеть так:

function add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Разве это не было так сложно? Кроме того, вы получаете дополнительные баллы за это WordPress.

5. Назовите пользовательские шрифты в вашей таблице стилей

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

h1,
h2,
h3,
h4,
h5,
h6 {
семейство шрифтов: 'Roboto';
}

Замечания: Обратите внимание на то, как используемый вами сервис определяет декларацию CSS для ваших шрифтов. На нашем тестовом сайте мы, похоже, не смогли заставить работать веб-шрифты Adobe Edge, потому что они вызывают Open Sans в CSS с открытых без в отличие от «Open Sans» в Google Fonts.

Это оно. Теперь вы знаете, как добавить пользовательские шрифты в WordPress вручную. Поздравь себя, это знания следующего уровня! Очевидно, что те же действия возможны через плагины. Об этом мы поговорим в следующем.

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

Сфера WordPress не была бы такой, какой была бы, если бы не было нескольких плагин-решений для добавления пользовательских платформ на платформу. Мы рассмотрим, как использовать Простые Google Шрифты, который является одним из самых популярных плагинов в этой области.

1. Установите плагин

Первый шаг - установка плагина. Для этого отправляйтесь на Плагины> Установить новый. Затем найдите имя плагина. В результатах поиска нажмите на Установить сейчас и активируйте плагин, как только он появится на вашем сайте.

2. Добавить / изменить шрифты на вашем сайте

Когда плагин активен, вы найдете новый пункт меню под названием Типография под Внешний вид> Настройка.

Типографское меню в WordPress Customizer

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

Простые настройки шрифтов Google в настройщике WordPress

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

легко Google шрифты изменить шрифт

Здесь самая важная часть находится под Семейство шрифтов. Здесь вы можете выбрать новый тип шрифта из всей библиотеки Google Font (используйте Сценарий / Subset ограничить выбор шрифта теми, у кого есть специальные символы).

Шрифты заказываются стандартным шрифтом, с засечками, без засечек, отображением, почерком и моноширинными шрифтами. Тем не менее, вы также можете просто искать их по имени.

Когда вы нажимаете на шрифт, вы можете просмотреть изменения в режиме реального времени справа.

изменил пользовательский шрифт в простых шрифтах Google

3. Настройте шрифт

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

Прежде всего, вы можете изменить шрифт-вес / стиль в меню с тем же именем. Это контролирует толщину букв.

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

настройки внешнего вида в простых шрифтах Google

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

настройки позиционирования в простых шрифтах Google

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

Это не работает, что мне делать?

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

Например, в теме «Двадцать шестнадцать» заголовки постов в блогах не только определены как H1, но также имеют класс CSS, называемый .начальное название. По этой причине плагин не может их изменить.

Чтобы устранить эту проблему, нужно создать так называемый управление шрифтом под Настройки> Google Fonts.

добавить контроль шрифта в простых шрифтах Google

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

Другие пользовательские шрифты WordPress плагины

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

  • Используйте любой шрифт - Это поможет вам использовать загруженные шрифты без CSS. Он размещает шрифты на вашем собственном сервере, а также предлагает инструменты для преобразования форматов шрифтов..
  • Typekit Шрифты для WordPress - Используйте шрифты от Adobe's Typekit сервис (на который нужно подписаться). Позволяет вводить встроенные коды и пользовательский CSS прямо в плагин.
  • TK Google Fonts - Альтернативное решение для встраивания шрифтов Google, которое в значительной степени переносит работу со шрифтами Google на сервер WordPress. Попробуйте шрифты с предварительным просмотром и пользовательским текстом, а затем измените его в настройщике WordPress..

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

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

1. Типография - часть первого впечатления

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

2. У шрифтов гораздо больше влияния, чем вы думаете

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

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

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

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

1. Используйте Google шрифты, чтобы найти пользовательскую типографику

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

Вот как это использовать:

2. Найдите правильный шрифт

Когда вы впервые перейдете на страницу Google Fonts (просто введите ее в Google Search), вы увидите следующее:

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

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

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

  • засечка - Значения шрифтов с волнистыми линиями в конце, как у Times New Roman.
  • Без засечек - Простые шрифты без загогулины, как Helvetica. Шрифты, используемые на этом сайте, являются примером этого.
  • дисплей - гарнитуры, которые могут быть использованы в больших размерах, таких как заголовки.
  • Почерк - Хотите, чтобы ваша типография выглядела так, как будто написана от руки? Тогда это ваша настройка.
  • Monospace - Типография, где все персонажи занимают одинаковое пространство, нравится.

Другие фильтры включают в себя:

  • Сортировка - Сортировка шрифтов после трендов, популярных, добавленных дат или в алфавитном порядке.
  • Языки -Ограничьте свой выбор шрифтов языками, не написанными на латинском алфавите, такими как арабский, тайский или вьетнамский.
  • Ряд стилей -Укажите, сколько доступных стилей вам нужно. Это означает, доступен ли шрифт различной толщины, курсив, полужирный и т. Д..
  • толщина - Выберите желаемую толщину вашего шрифта.
  • скос - То же, что и толщина, но для уклона. Он варьируется от прямого до почти горизонтального.
  • ширина - Фильтр шрифтов по ширине их букв и интервалов.

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

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

изменить образец текста в шрифтах Google

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

страница сведений о шрифте в Google Fonts

3. Добавьте шрифты в вашу коллекцию

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

шрифты, выбранные в шрифтах Google

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

4. Настройте параметры шрифта

Если вы удовлетворены своей коллекцией, нажмите на нижнее меню. При этом откроется этот экран:

настройки шрифтов в Google Fonts

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

настроить шрифты в шрифтах Google

Здесь вы можете выбрать стили рассматриваемых шрифтов. Это важно, если вы хотите использовать шрифты разных размеров, что часто бывает.

Однако будьте осторожны: чем больше стилей будет загружать ваш сайт, тем больше он будет тормозить (Google Fonts даже показывает скорость загрузки вашей текущей коллекции в правом верхнем углу). Так что думайте о том, что вам действительно нужно, и выбирайте только это. Кстати, есть и другие способы ускорить WordPress..

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

выберите языки шрифтов в Google Fonts

Кроме того, все, что вам нужно знать, это две иконки со стрелками вверху.

кнопка

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

Более важной является кнопка загрузки рядом с ней. Нажав на нее, вы можете скачать файлы шрифтов, чтобы использовать их на своем настольном компьютере (например, в Photoshop). использование Skyfonts чтобы держать их в курсе.

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

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

  • Мы рекомендуем более 15 веб-безопасных шрифтов

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map