Хотите ли вы добавить пользовательские шрифты в WordPress?? Пользовательские шрифты позволяют использовать красивую комбинацию различных шрифтов на вашем сайте для улучшения типографики и удобства использования.
Помимо того, что пользовательские шрифты хорошо выглядят, они также могут помочь вам улучшить читаемость, создать имидж бренда и увеличить время, которое пользователи проводят на вашем сайте.
В этой статье мы покажем вам, как добавить пользовательские шрифты в WordPress, используя Google Fonts, TypeKit и метод CSS3 @Font-Face.
Примечание: Загрузка слишком большого количества шрифтов может замедлить работу вашего сайта. Мы рекомендуем выбрать два шрифта и использовать их на всем сайте. Мы также покажем вам, как правильно загружать их, не замедляя работу вашего сайта.
Прежде чем мы рассмотрим, как добавить пользовательские шрифты в WordPress, давайте посмотрим, как найти пользовательские шрифты, которые вы можете использовать.
Как найти пользовательские шрифты для использования в WordPress
Шрифты раньше были дорогими, но теперь нет. Существует множество мест, где можно найти отличные бесплатные веб-шрифты, такие как Google Fonts, Typekit, FontSquirrel и другие.com.
Пользовательский шрифт на сайт WordPress
Если вы не знаете, как смешивать и сочетать шрифты, попробуйте использовать Font Pair. Это помогает дизайнерам объединять красивые шрифты Google в пары.
Выбирая шрифты, помните, что использование слишком большого количества пользовательских шрифтов будет замедлять работу вашего сайта. Вот почему вы должны выбрать два шрифта и использовать их во всем дизайне. Это также придаст последовательность вашему дизайну.
Учитывая сказанное, давайте рассмотрим, как добавить пользовательские шрифты в WordPress. Об этом мы и поговорим в этом уроке:
- Добавление пользовательских шрифтов в WordPress из Google Fonts
- Добавление пользовательских шрифтов в WordPress с помощью Typekit
- Добавление пользовательских шрифтов в WordPress с помощью CSS3 @font-face
Добавление пользовательских шрифтов в WordPress из Google Fonts
Google Fonts — это самая большая, бесплатная и наиболее часто используемая библиотека шрифтов среди разработчиков веб-сайтов. Существует несколько способов добавления и использования шрифтов Google Fonts в WordPress.
Способ 1: Добавление шрифтов Google с помощью плагина WordPress
Если вы хотите добавить и использовать шрифты Google на своем сайте, то этот метод, безусловно, самый простой и рекомендуется для новичков.
Первое, что вам нужно сделать, это установить и активировать плагин Google Fonts Typography. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
Сделка: Если вы хотите получить премиум-версию плагина, то обязательно используйте наш купон Google Fonts for WordPress на скидку 30%. Это позволит вам изменить цвет и размер шрифта в вашей теме WordPress и многое другое.
После активации вам будет предложено ввести свой адрес электронной почты, чтобы получить официальное краткое руководство.
Далее вам нужно будет нажать на Плагин Fonts " Настроить шрифты в боковой панели администратора.
Это автоматически приведет вас к клиенту темы WordPress и автоматически откроет новый раздел "Плагин шрифтов".
Здесь вы можете выбрать шрифты по умолчанию для вашего сайта в разделе "Основные настройки", а также шрифты для определенных частей вашего сайта в разделе "Дополнительные настройки".
Начнем с нажатия на "Основные настройки". Здесь вы можете выбрать шрифты для контента, заголовков, кнопок и полей.
Выпадающее меню "Семейство шрифтов" позволяет выбрать новый шрифт. В верхней части вы найдете шрифт по умолчанию, затем системные шрифты и, наконец, огромный список из более чем 1000 шрифтов Google.
Когда вы выбираете новый шрифт, предварительный просмотр автоматически меняется, чтобы показать вам, как он выглядит.
Теперь вы можете использовать расширенные настройки плагина для точной настройки выбора шрифтов.
Здесь вы найдете настройки для различных разделов вашего сайта, таких как заголовок сайта, навигационное меню, область контента, боковая панель и нижний колонтитул.
Например, в разделе "Содержание" вы можете изменить шрифт заголовков и цитат.
Вы можете выбрать пользовательские шрифты, которые хотите использовать, из выпадающего меню.
Аналогичным образом можно выбрать пользовательские шрифты для боковой панели.
Просто нажмите кнопку "Назад" и войдите в настройки "Боковой панели". Там вы найдете выпадающие меню для выбора шрифтов для заголовков и содержимого боковой панели.
Когда вы будете довольны выбранным шрифтом, не забудьте нажать кнопку "Опубликовать", чтобы сохранить изменения.
Метод 2: Добавление шрифтов Google вручную в WordPress
Этот метод требует добавления кода в файлы вашей темы WordPress. Если вы не делали этого раньше, то посмотрите наше руководство о том, как копировать и вставлять код в WordPress.
Сначала откройте библиотеку Google Fonts и выберите шрифт, который вы хотите использовать. Затем нажмите на кнопку быстрого использования под шрифтом.
На странице шрифта вы увидите стили, доступные для этого шрифта. Выберите стили, которые вы хотите использовать в своем проекте, а затем нажмите на кнопку боковой панели вверху.
Затем вам нужно перейти на вкладку 'Embed' в боковой панели, чтобы скопировать код вставки.
Есть два способа добавить этот код на ваш сайт WordPress.
Сначала вы можете отредактировать заголовок вашей темы.php файл и вставьте код перед тегом.
Однако, если вы не знакомы с редактированием кода в WordPress, то вы можете использовать плагин, чтобы добавить этот код.
Просто установите и активируйте плагин WPCode. Для получения более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
После активации перейдите на страницу Сниппеты кода " Верхний и нижний колонтитулы страницу и вставьте код вставки в поле "Заголовок".
Не забудьте нажать кнопку "Сохранить изменения", чтобы сохранить изменения. Теперь плагин начнет загружать код вставки Google Font на все страницы вашего сайта.
Вы можете использовать этот шрифт в таблице стилей вашей темы следующим образом:
.h1 site-title
Чтобы узнать больше, смотрите наше руководство о том, как добавить шрифты Google в темы WordPress.
Добавление пользовательских шрифтов в WordPress с помощью Typekit
Typekit от Adobe Fonts — еще один бесплатный и премиум-ресурс для потрясающих шрифтов, которые вы можете использовать в своих дизайнерских проектах. У них есть платная подписка, а также ограниченный бесплатный план, который вы можете использовать.
Просто зарегистрируйте учетную запись Adobe Fonts и посетите раздел "Browse Fonts". Здесь вам нужно нажать на кнопку кнопка для выбора шрифта и создания проекта.
Далее вы увидите код встраивания с идентификатором вашего проекта. Это также покажет вам, как использовать шрифт в CSS вашей темы.
Вам нужно скопировать этот код и вставить его в раздел вашего сайта.
Существует два способа добавления этого кода на ваш сайт WordPress.
Сначала вы можете отредактировать заголовок вашей темы.php файл и вставьте код перед тегом.
Однако если вы не знакомы с редактированием кода в WordPress, то вы можете использовать плагин для добавления этого кода.
Просто установите и активируйте плагин WPCode.
После активации перейдите на сайт Сниппеты кода " Верхний и нижний колонтитулы страницу и вставьте код вставки в поле "Заголовок". Затем нажмите кнопку "Сохранить изменения".
Вот и все. Теперь вы можете использовать выбранный вами шрифт Typekit в таблице стилей вашей темы WordPress следующим образом:
h1 .site-title
Для получения более подробных инструкций, ознакомьтесь с нашим руководством о том, как добавить потрясающую типографику в WordPress с помощью Typekit.
Добавление пользовательских шрифтов в WordPress с помощью CSS3 @font-face
Самый прямой способ добавления пользовательских шрифтов в WordPress — это добавление шрифтов с помощью метода CSS3 @font-face. Этот метод позволит вам использовать любой понравившийся шрифт на вашем сайте.
Сначала вам нужно загрузить понравившийся шрифт в веб-формате. Если у вас нет веб-формата для вашего шрифта, то вы можете конвертировать его с помощью генератора веб-шрифтов FontSquirrel.
После того, как у вас есть файлы веб-шрифта, вам нужно загрузить их на сервер хостинга WordPress. Лучшее место для загрузки шрифтов — новая папка "fonts" в директории вашей темы или дочерней темы.
Вы можете использовать FTP или файловый менеджер вашей cPanel для загрузки шрифта.
После загрузки шрифта вам нужно загрузить его в таблицу стилей вашей темы с помощью правила CSS3 @font-face, как показано ниже:
@font-face < font-family: Arvo; src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight: normal; >
Не забудьте заменить семейство шрифтов и URL на свои собственные.
После этого вы можете использовать этот шрифт в любом месте таблицы стилей вашей темы, например, так:
.h1 site-title
Загрузка шрифтов напрямую с помощью CSS3 @font-face не всегда является лучшим решением. Например, если вы используете шрифт из Google Fonts или Typekit, то для оптимальной производительности лучше всего использовать шрифт непосредственно с их сервера.
Мы надеемся, что это руководство помогло вам узнать, как добавить пользовательские шрифты в WordPress. Вы также можете узнать, как вставить видео с Facebook (признана экстремистской организацией на территории РФ), или посмотреть наш список лучших плагинов Instagram (признана экстремистской организацией на территории РФ) для WordPress.
Источник: www.wpbeginner.com