Как добавить потрясающую типографику в WordPress с помощью Typekit

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

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

Почему стоит использовать шрифты Typekit?

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

Библиотека Typekit — это огромная коллекция из более чем 1 000 шрифтов. Некоторые из самых красивых шрифтов, которые вы можете найти в Интернете, доступны через Typekit, сервис Adobe.

Их базовый бесплатный план включает в себя доступ к 230+ шрифтам, и вы можете бесплатно использовать 2 семейства шрифтов на одном сайте. Стоимость других тарифных планов начинается от $49.от 99 до 99 долларов.99 в год.

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

Если вам не понравилось видео или нужны дополнительные инструкции, то вы можете продолжить чтение ниже.

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

Типографика играет решающую роль в дизайне вашего сайта.

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

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

Правильные пользовательские веб-шрифты могут:

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

Готовы приступить к работе со шрифтами Typekit? Вот как использовать Typekit для настройки дизайна WordPress.

Как начать работу с Typekit

Сначала вам нужно будет создать учетную запись Typekit. Чтобы сделать это, просто посетите Typekit.com, чтобы сравнить доступные тарифные планы.

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

Планы подписки на Typekit

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

Создание набора для вашего сайта

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

На данный момент вы можете приступить к выбору шрифтов. Вы можете просматривать библиотеку шрифтов и фильтровать по таким параметрам, как классификация, вес, ширина, x-height и др.

Выбор шрифта из библиотеки Typekit

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

добавьте шрифт typekit в свой веб-комплект

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

добавление пользовательского веб-шрифта в набор

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

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

Вот и все! Теперь ваш набор шрифтов готов к использованию.

Добавление шрифтов Typekit в WordPress

Самый простой способ добавить ваши новые пользовательские веб-шрифты в ваш блог WordPress — это использовать плагин WordPress Typekit.

Мы рекомендуем плагин Typekit Fonts for WordPress. После установки и активации плагина, вы можете посетить Настройки » Typekit Fonts настройка плагина.

использование плагина wordpress typekit для настройки шрифтов

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

На скриншоте выше мы добавили шрифт в h1.CSS-селектор site-title.

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

Использование инструмента Inspect Element в Google Chrome для поиска классов CSS

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий