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

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

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

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

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

Поиск пользовательских шрифтов для WordPress

Была эпоха, когда даже шрифты были дорогими. Но это не так сегодня. Отличные бесплатные веб-шрифты можно скачать во многих местах, таких как FontSquirrel, TypeKit, Google Fonts и fonts.com. Мы рекомендуем вам попробовать пару шрифтов, если вам сложно сопоставлять и смешивать шрифты. Дизайнеры используют его для объединения лучших шрифтов Google.

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

Используйте Google Fonts для загрузки пользовательских шрифтов в WordPress

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

Используйте плагин Google Fonts

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

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

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

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

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

Вам нужно будет ввести селекторы CSS, как только вы нажмете кнопку управления созданием шрифта. Вы также можете использовать классы CSS или элементы HTML. Чтобы сохранить настройки, нажмите «Сохранить элемент управления шрифтом».

Для разных разделов вашего веб-сайта вы можете создать столько контроллеров шрифтов, сколько необходимо. Чтобы проверить пользовательские элементы управления шрифтом, созданные ранее, перейдите к параметру «Типография» и выберите «Тема оформления». Вы можете редактировать любые контроллеры в любой момент времени.

Добавить шрифты Google вручную

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

Выбирайте только те стили шрифтов, в использовании которых вы уверены. Прокрутив вниз, вы дойдете до раздела встроенного кода. Скопируйте встроенный код на стандартной вкладке и вставьте его в файл header.php вашей темы.

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

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

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

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

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

Для использования шрифта Typekit в вашей таблице стилей WordPress следуйте приведенным ниже кодам:

h1 .сайт-название { 
семейство шрифтов: 'modesto-condensed', Arial, без засечек; 
}

Используйте CSS3 @font-face для загрузки пользовательских шрифтов в WordPress.

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

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

В вашей теме или дочерней теме создайте «новую» папку в папке «шрифты», а затем загрузите свои собственные шрифты. Чтобы загрузить шрифт, используйте файловый менеджер или FTP вашей cPanel. Загрузите шрифт в таблицу стилей вашей темы следующим образом:

@шрифт-лицо {
    семейство шрифтов: имя шрифта;  
    источник: URL-адрес (http://www.sktthemes.org/skt-content/themes/your-theme/fonts/fontname-Regular.ttf);  
    вес шрифта: нормальный;  
}

Измените и замените семейство шрифтов и URL-адрес в приведенном выше коде. Для использования в таблице стилей следуйте приведенному ниже методу.

.h1 название сайта { 
семейство шрифтов: "font_name", Cambria, без засечек; 
}

Загрузка шрифтов напрямую с помощью этого метода не является лучшим решением. Лучше всего обслуживать шрифт напрямую со своего сервера или с оптимальной производительностью Typekit или Google Fonts.

Вывод

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

Статьи по Теме

Необычные шрифты в WordPress

Шрифты Google используются напрямую или с помощью плагина