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

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

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

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

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

Где найти шрифты для вашего сайта

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

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

• Google Fonts: просмотрите более 600 шрифтов с открытым исходным кодом, оптимизированных для Интернета. Использовать эти шрифты на вашем веб-сайте WordPress очень просто, как мы вскоре расскажем.
• Font Squirrel: еще один большой репозиторий бесплатных шрифтов.
• Edge Web Fonts: коллекция бесплатных веб-шрифтов от Adobe Typekit.
• Typekit: профессиональная коллекция из более чем 4000 бесплатных и премиальных шрифтов от Adobe для использования в Интернете и печати.

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

Инструменты типографики для веб-дизайнеров

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

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

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

Один из онлайн-ресурсов, на который вы обязательно должны обратить внимание при настройке шрифтов на своем веб-сайте, — это Калькулятор типографики золотого сечения. Этот инструмент типографики от автора Thesis Framework позволяет вам вводить размер шрифта, а затем ширину области содержимого. Затем инструмент рассчитает идеальные типографские настройки для вашей конкретной конфигурации веб-сайта.

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

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

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

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

Легкие шрифты Google

Easy Google Fonts — это бесплатный плагин, который дает вам возможность использовать любой из 600+ бесплатных шрифтов из репозитория Google на вашем веб-сайте WordPress. Плагин работает с инструментом WordPress Customizer. Это позволяет вам просмотреть свои изменения, прежде чем принять окончательное решение о том, какие шрифты использовать на вашем сайте.

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

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

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

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

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

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

Вышеупомянутый плагин Easy Google Fonts настоятельно рекомендуется. Однако у него есть один недостаток: вы можете использовать только шрифты из коллекции Google Fonts. Если ни один из этих 686 шрифтов не подходит или вы хотите использовать собственный шрифт , то такой же бесплатный плагин Use Any Font — хорошая альтернатива.

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

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

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

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

Шрифты Typekit для WordPress

Если вы хотите использовать бесплатные и премиальные шрифты из службы Adobe Typekit на своем веб-сайте WordPress, то бесплатный плагин Typekit Fonts for WordPress для вас.

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

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

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

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

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

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

Как только файл шрифта окажется на вашем сервере, откройте файл таблицы стилей CSS вашей темы для редактирования. Это можно сделать в панели администратора WordPress, на экране «Внешний вид» > «Редактор».

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

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

Заключение

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

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

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

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