Как добавить пользовательские шрифты на сайты Elementor в 2022 году

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

«Шрифты веб-сайтов составляют 90% дизайна».

Элементор

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

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

Объяснение функции пользовательского шрифта Elementor

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

На вашем сайте Elementor вы найдете пять типов пользовательских форматов шрифтов, вот они:

1. Формат веб-открытого шрифта (WOFF) — WOFF является наиболее рекомендуемым форматом для использования, поскольку он поддерживается всеми современными браузерами.
2. Формат веб-открытого шрифта (WOFF 2.0) — шрифт TrueType или OpenType, обеспечивающий лучшее сжатие, чем WOFF 1.0.
3. Шрифты TrueType (TTF) — этот шрифт был разработан в конце 1980-х годов Apple и Microsoft.
4. Шрифты/фигуры SVG — шрифты SVG позволяют использовать SVG в качестве глифов при отображении текста. Обязательно используйте этот формат для поддержки старых версий iPhone.
5. Встроенные шрифты OpenType (EOT) — этот файл шрифта работает в IE, но не в других браузерах. Обязательно используйте этот формат для поддержки более ранних версий IE.

Примечание. Европейский Союз добавляет новое правило в GDPR. Любой, кто использует непосредственно размещенные шрифты Google на своем веб-сайте, нарушает правила GDPR. И Google оштрафует этот сайт на 100 евро. Поэтому, если у вас есть шрифты Google, они должны быть размещены локально, или вы можете использовать свои собственные шрифты.

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

Давайте посмотрим ниже, чтобы узнать, как добавить шрифты на сайт Elementor:

Как добавить шрифт на веб-сайты Elementor в WordPress

Вы можете добавить собственный шрифт двумя простыми способами:

1. Способ 1: добавить шрифт в Elementor, включая коды
2. Метод 2: использовать функцию пользовательского шрифта Elementor

Если вы новичок в Elementor, посмотрите этот удобный блог о том, как правильно использовать Elementor.

Способ 1: добавить шрифт в Elementor с помощью кодов

Давайте посмотрим, как вы можете добавить шрифты на свой сайт Elementor, следуя ручному процессу.

• Добавьте новую папку «шрифты» в папку вашей темы через FTP-клиент или с помощью cPanel . Новая папка должна находиться в папке wp-content/themes/fonts .
• После того, как вы добавили новую папку «шрифты», добавьте в нее все файлы шрифтов.
• Теперь откройте таблицу стилей темы (style.css) и добавьте в нее следующий код:

 @font-face { font-family: 'nameofnewfont'; src: url("/fonts/nameofnewfont.woff2") format("woff2"), url("/fonts/nameofnewfont.woff") format("woff"); font-weight: normal; font-style: normal; }

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

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

Метод 2: использовать функцию пользовательского шрифта Elementor

Пользовательский шрифт — это профессиональная функция Elementor. Поэтому убедитесь, что вы установили и активировали плагины Elementor (бесплатно) и Elementor Pro на своем веб-сайте.

Шаг 01: добавьте собственный шрифт на свой сайт

Сначала перейдите в Elementor> Пользовательские шрифты .

Здесь вы можете создавать собственные шрифты. Например, нажмите « Добавить новый », чтобы создать собственную структуру шрифта.

Дайте название вашему шрифту. Затем нажмите « Добавить вариант шрифта» .

Шаг 02: добавьте вариант шрифта и загрузите файлы шрифта

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

Давайте загрузим файл пользовательского шрифта TTF. Для этого нажмите на кнопку загрузки .

Загрузите файл шрифта со своего устройства или из расположенной папки.

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

Когда вы закончите, вы можете увидеть детали шрифта здесь.

Следуя тому же процессу, продолжите процесс загрузки файла шрифта для каждого формата. Давайте загрузим еще один вариант шрифта. Например, нажмите кнопку « Добавить вариант шрифта» и установите толщину и стиль шрифта.

Установите толщину шрифта на 100 и снова нажмите кнопку загрузки.

После того, как вы загрузили файл, вы можете добавить его из медиагалереи.

Шаг 03: Опубликуйте окончательный пользовательский шрифт

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

Шаг 04: используйте пользовательский шрифт для вашего дизайна Elementor

Теперь вы можете думать о том, как использовать этот пользовательский шрифт. Верно? Давайте посмотрим, как найти и использовать этот пользовательский шрифт, вам нужно открыть любую из ваших страниц Elementor на панели дизайна Elementor. А затем добавьте любой из текстовых виджетов на панель.

Добавьте виджет Heding на панель редактирования Elementor.

Как только вы добавите виджет «Текст» (заголовок),

• Перейдите в раздел « Стиль ».
• Нажмите на типографику
• И здесь вы можете найти шрифт, который вы только что создали ранее ( My Font ). Просто выберите шрифт

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

Ну, необычный дизайн может привлечь внимание клиентов, чем простой. Итак, если вы хотите сделать заголовок своей веб-страницы более умным и восхитительным, следующий раздел как раз для вас. Здесь мы покажем, как можно стилизовать заголовок с помощью виджета анимированного текста Happy Addons.

Давайте узнаем, как создать собственный заголовок Elementor

Стилизуйте свой шрифт с помощью виджета текстовой анимации Happy Addons

Виджет «Анимированный текст» — это профессиональная функция Happy Addons. Вы можете сделать свой текст таким интересным и привлекательным, используя этот классный виджет. Он имеет 10 готовых макетов дизайна, чтобы уменьшить ваши дополнительные усилия и трудности. Поэтому, как только вы добавите его на панель дизайна Elementor, вам просто нужно выбрать правильный макет дизайна и настроить его в зависимости от структуры вашей веб-страницы.

Давайте посмотрим на практике, как вы можете использовать виджет «Анимированный текст» на своем сайте WordPress вместо обычного текста или шрифта.

Для начала вам необходимо установить и активировать эти плагины:

1. Элементор Бесплатно
2. Happy Addons Free и Pro

Шаг 1: Добавьте виджет с анимированным текстом

Сначала перетащите виджет из галереи виджетов.

Вы получите начальный вид виджета на экране.

Используйте пользовательский текст шрифта, который вы создали ранее. Чтобы выбрать его, нажмите на кнопку стиля, типографику и выберите « Мои шрифты ».

Шаг 2: добавьте дизайн к вашему тексту

Теперь нажмите на раздел содержимого еще раз. И выберите дизайн, который вам больше всего нравится.

После того, как вы утвердили дизайн, пришло время настроить стиль анимации. Для этого нажмите на Content и там найдите Animation type . Изучите каждый тип один за другим, чтобы получить лучший результат для вашего сайта.

Примечание. Задержка анимации в миллисекундах. Мин. 1000 и макс. 30000.

Шаг 3: просмотрите окончательный результат вашего анимированного текста на веб-странице

Давайте посмотрим на окончательный результат после того, как вы настроите виджет «Анимированный текст» в своем шрифте.

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

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

Некоторые общие вопросы о пользовательских шрифтах Elementor

Готовы изучить функцию пользовательского шрифта Elementor?

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

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

Если вам нравится этот учебник, вы можете подписаться на нашу рассылку, чтобы читать больше интересных статей, таких как учебник по WordPress, учебник по Elementor, советы и рекомендации и последние обновления!