Как добавить пользовательские шрифты на веб-сайт WordPress [2022]

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

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

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

Как упоминалось выше, вы найдете множество сайтов, с которых можно легко скачать шрифты. Например, Font Squirrel поставляется с тремя бесплатными шрифтами, которые вы можете использовать. Google Fonts — еще один замечательный вариант, в котором вы найдете более 900 шрифтов на выбор. Помимо этого, Edge Web Fonts также может предложить вам огромное разнообразие шрифтов. Для личного использования вы можете выбрать Fonts.com или 1001 Free Fonts .

DaFont — старейшая библиотека шрифтов, содержащая более 60 000 гарнитур, из которых вы можете отфильтровать нужные шрифты. Вам нужно скачать выбранные шрифты и не похожи на интеграцию с Google Font. Похожая библиотека шрифтов — это UrbanFont с огромным набором творческих и прибыльных шрифтов.

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

Если вы хотите арендовать шрифты ежемесячно и платить абонентскую плату, вы можете выбрать Fontstand . Он предлагает около 2000 потрясающих шрифтов и взимает с вас ежемесячную плату. Точно так же, как эта Type Network — это еще одна библиотека шрифтов, размещенная на собственном сервере, где вы одновременно получаете более 400 семейств шрифтов и легко их исследуете.

Как выбрать лучший пользовательский шрифт для веб-сайта?

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

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

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

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

Источник — https://www.w3schools.com/Css/css3_fonts.asp

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

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

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

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

Добавление пользовательских шрифтов вручную — самый мудрый способ не замедлять работу вашего сайта. Поскольку вы уже изучили некоторые размеры шрифтов, чтобы найти нужный шрифт, сначала загрузите шрифт. Теперь вам нужно загрузить шрифт в свою учетную запись хостинга веб-сайта. Проверьте, какую тему вы используете для своего сайта WordPress. Загрузите файл CSS вашего шрифта в свою учетную запись. При загрузке шрифта не забудьте извлечь файлы из ZIP-файла.

Чтобы загрузить файл шрифта, перейдите в каталог wp-content/themes/your-theme/fonts. Вы можете создать отдельную папку шрифтов для вашего удобства. Загрузите файл с помощью файлового менеджера в hPanel. Теперь перейдите в свою учетную запись WordPress и нажмите « Внешний вид ». Выберите редактор тем, где вам будет показан файл style.css. Добавьте следующий код внизу кода.

@шрифт-лицо {

семейство шрифтов: Aguafina Script-Regular;

источник: URL -адрес ( http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf );

вес шрифта: нормальный;

}

Теперь нажмите кнопку «Обновить файл», чтобы сохранить изменения. Имейте в виду, что код font-face загружает шрифт каждый раз, когда посетитель заходит на ваш сайт. Однако шрифт еще не был применен ни к одному элементу. Вы должны изменить тот же самый файл style.css, чтобы назначить шрифт определенному элементу. Например, следующий код заставит заголовок нашего веб-сайта использовать сценарий шрифта.

.сайт-название {

семейство шрифтов: «Aguafina Script-Regular» , Arial, без засечек;

}

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

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

WP Гугл шрифты

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

Плагин шрифтов

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

Создайте привлекательный веб-сайт с помощью пользовательских шрифтов

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

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