Как добавить шрифт в elementor wordpress

Как добавить шрифты в Elementor?

Добавить шрифты в Elementor довольно просто. После входа в систему перейдите на вкладку «Шрифты» в левом верхнем углу экрана. Здесь вы можете просмотреть различные шрифты, доступные в Elementor, и выбрать тот, который вы хотите использовать. Выбрав шрифт, нажмите на кнопку «Добавить в Elementor» справа от него.

СОВЕТ: Добавление шрифтов в Elementor можно сделать через вкладку «Шрифты» в WordPress Customizer. В разделе «Добавить шрифты» вы можете выбрать шрифты из разных источников. Мы рекомендуем использовать репозиторий Google Fonts, который является бесплатным и с открытым исходным кодом.

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

Как подключить шрифт в WordPress: через CSS, из Google Fonts, в редакторе

Недавно в комментариях поста о продвинутом редакторе TinyMCE Advanced меня спросили как добавить шрифт в вордпресс дабы у пользователей появилась возможность его выбирать при написании текстов. По идее, это должно немного разнообразить оформление вашего контента. Данный вопрос встречается не первый раз, поэтому я решил подготовить детальное описание этой задачи. Однако кроме ситуации с редактором мы рассмотрим и глобальное подключение шрифтов для WordPress сайта. Тему условно можно раздели на 3 направления:

• реализация с помощью CSS стилей;
• использование Google Fonts;
• установка новых пользовательских шрифтов в WordPress редакторе.

Добавление шрифтов через CSS

Современная технология HTML5 позволяет работать с TTF шрифтами в CSS стилях. Данный метод скорее относится к возможностям верстки нежели WP системы, поэтому он подходит для всех без исключения сайтов. С его помощью вы сможете влиять не только на контент страниц, но и менять разные элементы шаблона.

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

Алгоритм состоит из двух шагов. Во-первых, перед тем как подключить шрифт к WordPress сайту вам нужно будет «раздобыть» соответствующий файл шрифтов и загрузить его на хостинг в ту же директорию, где находится style.css. Для работы можете скачать бесплатный FTP клиент Mozilla.

Далее открываете файл стилей style.css и вставляете туда код:

@font-face { font-family: 'Lobster'; src: url('lobster-regular.ttf'); } h1, h2 { font-family: 'Lobster', 'Georgia', serif; }

В данном случае вы сначала задаете новый font-family, указывая соответствующий TTF файл, а затем используете его в качестве шрифта для заголовков H1, H2.

Я тестировал код на последних версиях Firefox, IE, Chrome и Opera — все прошло хорошо. Однако, далеко не все старые версии браузеров поддерживают такой код. Следующая статья содержит таблицу совместимости решения, а также полезную информацию о разных проблемах, что могут возникнуть в процессе реализации.

Если же вы хотите охватить все случаи (в том числе и IE 6-8), то придется немного расширить базовый код.

Шрифты Google в WordPress

Наверняка многие из вас знают проект Google Fonts, позволяющий использовать на сайте нестандартную типографику. Давайте рассмотрим как добавить шрифт в вордпресс с помощью данного сервиса. Первым делом заходите на сайт fonts.google.com и выбираете нужный вариант. Далее кликаете по кнопке «Select this font» и внизу страницы появится «панелька» с выбранными фонтами.

При открытии окна увидите инструкцию по интеграции шрифтов Google с сайтом. Во вкладке «Customize» сможете выбрать поддержку кирилицы (если нужно), после чего базовый код вставки немного изменится. Добавляете его в файл шаблона header.php.

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

h1, h2 { font-family: 'Lobster', cursive; }

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

Подключение шрифтов в TinyMCE Advanced

Рассмотрим задачу как добавить новый пользовательский шрифт в WordPress редакторе TinyMCE Advanced. Хочется отдельно подчеркнуть, что решение работает именно под данный конкретный модуль, а стандартному текстовому редактору может и не подойти! Также в процессе используем плагин сниппетов Code Snippets (для большей наглядности) — вам не нужно будет вносить правки в functions.php, а сможете сделать это через интерфейс админки. Всего потребуется создать 3 сниппета:

1. Сначала реализуем выбор шрифтов в выпадающем меню TinyMCE Advanced.

add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' ); function wpex_mce_google_fonts_array( $initArray ) { //$initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; $theme_advanced_fonts = 'Aclonica=Aclonica;'; $theme_advanced_fonts .= 'Lato=Lato;'; $theme_advanced_fonts .= 'Michroma=Michroma;'; $theme_advanced_fonts .= 'Paytone One=Paytone One'; $initArray['font_formats'] = $theme_advanced_fonts; return $initArray; }

2. Затем создаем отображение оформления текста в редакторе.

add_action( 'admin_init', 'wpex_mce_google_fonts_styles' ); function wpex_mce_google_fonts_styles() { $font1 = 'http://fonts.googleapis.com/css?family=Aclonica:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font1 ) ); $font2 = 'http://fonts.googleapis.com/css?family=Lato:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font2 ) ); $font3 = 'http://fonts.googleapis.com/css?family=Michroma:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font3 ) ); $font4 = 'http://fonts.googleapis.com/css?family=Paytone+One:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font4 ) ); }

3. На последнем этапе добавляем импорт стилей внутри WP и на самом сайте. Кстати, первые 2 сниппета можно настроить для работы только в админке, а последний должен быть подключен и в бэкенде, и во фронтенде.

add_action( 'admin_head-post.php', 'cwc_fix_html_editor_font' ); // add_action( 'admin_head-post-new.php', 'cwc_fix_html_editor_font' ); add_action( 'wp_head', 'cwc_fix_html_editor_font' ); function cwc_fix_html_editor_font() < ?>   }

add_action( ‘admin_head-post.php’, ‘cwc_fix_html_editor_font’ ); // add_action( ‘admin_head-post-new.php’, ‘cwc_fix_html_editor_font’ ); add_action( ‘wp_head’, ‘cwc_fix_html_editor_font’ ); function cwc_fix_html_editor_font() < ?>

В итоге получится что-то вроде этого:

Напоследок в редакторе напишите текст для тестирования, сохраните запись и проверьте получилось ли подключить шрифт к WordPress сайту. Опытные пользователи, которые не хотят использовать сторонний модуль Code Snippets, могут смело размещать все сниппеты в файле функций functions.php. Источник последнего решения находится тут, если вдруг будут какие-то вопросы или захотите посмотреть код в оригинальной версии.

Надеюсь, теперь вопрос как добавить шрифт в WordPress не вызовет у вас особой сложности. Еще советую глянуть статью про изменение цвета текста в WordPress редакторе (в частности с помощью плагина TinyMCE Color Grid). Также можете зайти в раздел вордпресс шрифтов дабы просмотреть все заметки по теме. Пожелания и советы оставляйте в комментариях.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов — 10, средний балл: 6,60 из 7)

Категории: Возможности; Начинающим;
Теги: новичкам, оформление админки, текстовый редактор, тексты блога, шрифты.

Похожие статьи:

1. Как добавить ссылку на изображение в WordPress
2. Записи и посты wordpress, оформление записи
3. Галерея в WordPress с эффектом Lightbox
4. Совместимость и прошлые версии плагинов в WordPress: где проверить и как скачать?
5. Как откатить Вордпресс и модули на предыдущие версии (вручную и с плагинами)

Как добавить шрифт в elementor wordpress

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

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

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

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

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

Elementor Black Friday

Enjoy Amazing Deals Up to 50% Off

• Через FTP-клиент добавьте новую папку шрифтов в папку тем вашего веб-сайта.
• Добавьте все файлы шрифтов в папку, которую вы добавили ранее.
• Используйте приведенный ниже код и вставьте его в таблицу стилей темы, то есть style.css.

@font-face < font-family: ‘nameofnewfont’; src: url(‘fonts/nameofnewfont.ttf/eot); font-weight: normal; font-style: normal; >

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

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

Как добавить пользовательские шрифты в WordPress с помощью Elementor

С Elementor довольно легко работать со шрифтами. Их можно загрузить и использовать очень просто.

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

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

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

Вот как вы можете добавлять пользовательские тексты в свой WordPress с помощью Elementor.

Как создавать собственные шрифты

Для бесплатных шрифтов существует множество веб-сайтов, таких как DaFont, Font Squirrel, Fontsly и другие. Но для создания собственных шрифтов есть Adobe Typekit.

Adobe Typekit

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

Elementor и Typekit — идеальное сочетание. Просто введите свой ключ Typekit на панели настроек на вкладке « Интеграции», чтобы быстро увидеть все шрифты Typekit в настройках типографики Elementor. Все, что вам нужно сделать, это нажать Sync Kit и немного подождать.

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

Различные стили и вес шрифта

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

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

Более того, вы не сможете использовать веса или варианты, которые не загружали. В зависимости от браузера он выберет ближайший возможный вариант, который поддерживает.

Это все из этого руководства о пользовательских шрифтах и о том, как они могут помочь вам улучшить ваш сайт. Не забудьте присоединиться к нам на наших Facebook и Twitter, чтобы быть в курсе нашего контента.

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

Как добавить свои шрифты в Elementor WordPress? В этом видео я подробно рассказал, как это сделать. Использую Elementor pro. Запись на консультацию: �� https://docs.google.com/forms/d/e/1FAIpQLSfQ-EMMjJ_9f5H9DTAQ1DX-z4liXx108WbqPnz0gk0MlCQ5Iw/viewform Подписывайтесь на мой инстаграм: �� https://instagram.com/aleksimax Мой второй канал: �� https://www.youtube.com/channel/UCeUdud7JsByQhtZ5FzcmrZg ———————————————- Понравился данное видео? Обязательно поставьте Лайк ❤️ и подпишитесь на мой аккаунт.

Показать больше

Войдите , чтобы оставлять комментарии.