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

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

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

Прежде всего, найдите правильный шрифт; существует бесчисленное множество сайтов, предлагающих тысячи бесплатных шрифтов для загрузки. Попробуйте Google Fonts, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 Free Fonts, Fonts.com.

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

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

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

Это включает в себя следующие шаги:

Шаг 1

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

Шаг 2

После этого вы можете загрузить этот файл шрифта на свой хостинг-сервер WordPress в каталог «wp-content/themes/your-theme-folder/fonts». Если вы еще не создали специальную папку для своих пользовательских шрифтов, создайте ее и сохраните в ней.

Шаг 3

Затем перейдите в админ-панель WordPress. Выберите «Внешний вид» и перейдите в «Редактор тем». На этом этапе вы увидите файл style.css темы на своем экране. Под этим вам нужно будет добавить этот раздел кода:

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

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

Шаг 4

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

Шаг 5

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

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

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

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Рекомендуется для вас: Руководство для начинающих: Как установить тему WordPress?

Краткое примечание:

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

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

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

С другой стороны, ручная установка пользовательского шрифта через CSS позволяет подключать шрифты различных форматов, включая SVG, WOFF, TTF и OTF. Этот метод также позволяет вам работать, не полагаясь на сторонние сервисы. Ваши файлы шрифтов будут расположены на вашем сервере. Это самый прямой способ добавить пользовательские шрифты в WordPress.

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

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

Использование Google Fonts — самый простой способ сделать это, и вы можете просматривать свои изменения и пользовательские шрифты в режиме реального времени на экране.

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

Шаг 1

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

Шаг 2

Открыв эту страницу, вы сможете нажать кнопку «Редактировать шрифт» в том разделе страницы, который вы хотите начать редактировать. Затем вы можете работать с различными подразделами, выбирая стиль шрифта, размер, поля и т. д. — эти разделы будут различаться в зависимости от используемой вами темы.

Ваша тема также может означать, что вы не сможете напрямую редактировать выбранный вами шрифт для различных разделов вашего веб-сайта. Однако для этой проблемы есть простое решение: просто перейдите в «Настройки», затем в «Шрифты Google», где вы можете создать свои собственные элементы управления шрифтами. Для этого просто введите имя элемента управления в поле и выберите селекторы CSS. Это позволяет вам добавлять любые элементы HTML, которые вы хотели бы настроить для этого шрифта. После того, как вы ввели эту информацию, обязательно сохраните изменения, нажав кнопку «Сохранить управление шрифтом», чтобы ваши настройки были полностью обновлены. Затем вы можете продолжить создавать столько пользовательских элементов управления шрифтами, сколько вам нужно для каждого отдельного раздела вашего веб-сайта WordPress.

Шаг 3

Чтобы использовать эти новые контроллеры шрифтов после их создания, просто вернитесь в раздел «Внешний вид», нажмите «Настройщик», а затем перейдите на вкладку «Типография». После этого вы увидите параметр с надписью Theme Typography — когда вы нажмете на него, вы сможете получить доступ к своим пользовательским элементам управления шрифтом, просто нажав кнопку «Редактировать», чтобы вы могли выбрать нужные шрифты и вид, который вы хотите для этого конкретного контроль. Еще раз не забудьте сохранить изменения, нажав кнопку «Опубликовать» или «Сохранить», чтобы обновить свой сайт.

Краткое примечание:

Некоторые другие замечательные настраиваемые плагины шрифтов WordPress, которые мы рекомендуем, — это Custom Font Uploader и Use Any Font, но есть бесчисленное множество других на выбор, поэтому изучите свои варианты, прежде чем остановиться на том, который вы хотите использовать.

Вам также может понравиться: 20 самых продаваемых микронишевых тем WordPress.

Наконец, попробуйте использовать темы

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

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

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