Как поменять шрифт на всем сайте wordpress

Что такое шрифты и как изменить шрифты в WordPress

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

Невероятно, как простое изменение в типографике может иметь все значение.

От обычного забавного шрифта, такого как Comic Sans, до более профессионального и серьезного шрифта, такого как Helvetica, шрифт может оказать огромное влияние на восприятие вашего веб-сайта.

К счастью, изменить шрифт в WordPress относительно просто. Большинство тем имеют встроенные опции для смены шрифтов.

Но что, если в вашей теме нет нужного шрифта? Можете ли вы добавить дополнительные шрифты в тему WordPress?

Обо всем этом и многом другом мы расскажем в этой статье.

Мы также расскажем, как изменить шрифт с помощью компоновщика страниц, редактора WordPress, CSS, настройщика тем и многого другого.

Хотите изменить шрифты WordPress для определенных фрагментов контента? Мы прикрыли вас и там!

Что такое шрифты и как они работают?

Содержание

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

Некоторые примеры шрифтов включают Arial 12 pt, Verdana 10 pt жирный, Times New Roman 14 pt курсив, Roboto, Georgia и многие тысячи других.

Как правило, мы знаем шрифты как Arial или Verdana, но шрифт также включает размер «12 pt» и детали стиля «жирный» или «курсив».

Здорово! Итак, мы знаем, что такое шрифт. Если вы подумываете о покупке шрифта в Интернете, вы заметите, что многие из них продаются как семейство. Итак, что такое семейство шрифтов?

Давайте рассмотрим пример, чтобы прояснить это.

Если вы используете MS Word или Google Docs, вы можете легко выделить текст жирным шрифтом, курсивом или даже полужирным курсивом. Это разные варианты одного и того же шрифта, составляющие семейство шрифтов.

Как показано ниже, вот пример семейства шрифтов «Roboto».

Roboto — это семейство, состоящее из нескольких шрифтов, таких как:

• Робото Обычный
• Робото Тонкий 100
• Roboto Thin 100 Курсив
• Робото Лайт 300
• Roboto Light 300 Курсив
• Робото Обычный 400
• Roboto Regular 400 курсив
• Робото Средний 500
• Roboto Medium 500 курсив
• Робото Жирный 700
• Roboto Bold 700 курсив
• Робото Блэк 900
• Roboto Black 900 курсив

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

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

Что такое веб-шрифты?

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

Для правильной загрузки веб-шрифтов требуется четыре типа файлов. Это файл TrueType, файл EOT, файл WOFF и файл SVG. Каждый из этих файлов предназначен для определенных браузеров.

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

Что такое локально размещенные шрифты?

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

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

Что такое веб-безопасные шрифты?

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

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

Примеры веб-безопасных шрифтов включают Arial, Times New Roman, Verdana, Helvetica и Georgia.

Что такое шрифты Google?

В настоящее время Google Fonts представляет собой набор из 1357 бесплатных семейств шрифтов, которые удобно использовать с помощью CSS и Android.

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

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

https://fonts.googleapis.com/css?family= FontName “>

Вышеупомянутая строка кода должна быть добавлена ​​внутрь

раздел вашей страницы. Вам нужно будет заменить FontName фактическим названием шрифта.

Например, если вы хотите использовать шрифт Arial, синтаксис будет таким:

https://fonts.googleapis.com/css?family= Arial “>

Как только это будет сделано, вы можете включить в свою таблицу стилей CSS следующее:

.css-selector

Или добавьте встроенный стиль непосредственно к самому элементу:

ИмяШрифта’, с засечками;”>Текст

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

Что такое потрясающий шрифт?

Font Awesome — это набор инструментов для шрифтов и значков, предназначенный для использования со встроенными элементами. Обычно используемые элементы для значков и .

Чтобы использовать Font Awesome, добавьте следующую строку кода в

раздел вашей страницы.

Вам не нужно ничего скачивать или устанавливать. Чтобы использовать значки Font Awesome, просто добавьте префикс fa к имени значка.

Например, как показано на изображении ниже, вы можете включить значок автомобиля, добавив « fa fa-car » в элемент.

При изменении размера шрифта или цвета значок изменяется соответствующим образом.

Как изменить шрифты WordPress с помощью настройщика тем

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

Но что, если вы хотите применить изменения шрифта на своем веб-сайте?

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

Перейдите в « Внешний вид»> «Настроить» , чтобы получить доступ к настройщику WordPress.

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

Если вы используете тему Astra, нажмите Global , а затем вкладку Typography .

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

Хотите настроить и изменить шрифт для отдельных заголовков? Без проблем!

От H1 до H6 вы сможете изменить шрифт для каждого тега заголовка так, как хотите.

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

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

Как изменить шрифты WordPress с помощью плагина

Что делать, если в вашей теме нет нужного шрифта? Или, может быть, в вашей теме вообще нет возможности менять шрифты?

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

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

Некоторые популярные плагины: Easy Google Fonts, Fonts Plugin | Типография шрифтов Google и шрифты WP Google.

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

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

Чтобы использовать этот плагин, установите Easy Google Fonts на свой сайт WordPress.

После установки плагина перейдите в « Внешний вид» > «Настроить» .

Перейдите к Типографика > Типографика по умолчанию .

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

У вас есть несколько вариантов настройки шрифта, с которыми можно поиграть. Вы также можете стилизовать и расположить текст именно так, как хотите.

Завершив внесение изменений, нажмите « Опубликовать » .

Хотите добавить пользовательские элементы управления шрифтом?

Плагин Easy Google Fonts позволяет изменить шрифт для элементов по умолчанию, таких как абзацы и теги заголовков.

Но что, если вы хотите изменить шрифт для элемента цитаты?

Плагин Easy Google Fonts упрощает эту задачу. Однако для этого вам нужно немного знать CSS. По крайней мере, вам нужно знать имя контейнера CSS.

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

На вкладке « Стили » вы увидите имя контейнера, в данном случае это blockquote .

Определив имя контейнера, перейдите в « Настройки» > «Простые шрифты Google» .

Введите имя для вашего элемента управления шрифтом. Это только для справки. Например, мы назвали наш пользовательский элемент управления « Мой стиль цитаты» .

Затем в разделе «Селекторы CSS управления шрифтом» добавьте свой селектор CSS. В этом случае мы добавим «blockquote».

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

Теперь вернитесь к Appearance > Customize > Typography .

Теперь вы найдете дополнительную вкладку Theme Typography .

Щелкните Типографика темы .

Обратите внимание на настраиваемый элемент управления шрифтом, который вы только что добавили?

Теперь вы можете легко настроить и изменить шрифт любого элемента на вашем сайте WordPress без написания кода!

Как изменить шрифты WordPress с помощью CSS

Если вам удобно писать небольшой код, другой способ изменить шрифт в WordPress — использовать CSS. Это полезно, когда параметры настройки вашей темы не позволяют вам менять шрифты.

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

Не открывая таблицы стилей вашего веб-сайта, вы можете легко добавить CSS через настройщик WordPress.

Перейдите в « Внешний вид» > «Настроить» > «Дополнительный CSS» и разместите код CSS.

Допустим, вы хотите настроить тег H1.

Код CSS будет следующим:

Это изменит тег H1 на вашем сайте на размер шрифта Verdana 30.

Точно так же, если вы хотите изменить шрифт тега абзаца на размер 20 и белый цвет (#FFFFFF), CSS будет:

Хотя изменить шрифты с помощью CSS довольно просто, это определенно поможет, если вы знаете, как программировать.

Как изменить шрифты WordPress с помощью компоновщика страниц

Ранее мы рассказывали, как менять шрифты с помощью компоновщика страниц Elementor и Brizy. Однако это было для отдельного элемента.

Хотя это работает, вы можете изменить шрифт на всех страницах вашего веб-сайта WordPress с помощью компоновщика страниц.

Конструкторы страниц делают это очень простым. Мы будем использовать конструктор страниц Elementor, чтобы объяснить, как это сделать.

Самый простой способ — открыть любой пост или страницу с помощью редактора Elementor.

Затем нажмите на три строки в верхнем левом углу вашего редактора.

Теперь нажмите «Настройки сайта » .

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

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

И вот как просто изменить шрифты с помощью компоновщика страниц!

Как разместить локальные шрифты в WordPress

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

Почему мы должны размещать шрифты локально в WordPress?

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

Каждый HTTP-запрос добавляет дополнительную работу браузеру и замедляет загрузку страницы. Ни один из них не поможет пользователю!

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

Результатом является более быстрое время загрузки страницы, потенциальный импульс для вашего SEO и счастливые посетители!

Чтобы разместить шрифты локально, начните с выбора шрифта (шрифтов), которые вы хотите использовать на локальном сервере. Это может быть один шрифт или целое семейство шрифтов.

Затем создайте папку с именем «шрифты» на своем сервере с помощью FTP-клиента, такого как FileZilla, или файлового менеджера из панели управления хостингом.

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

Допустим, вы загрузили шрифт « Roboto-Black.ttf » в удаленную папку «шрифты». В таком случае URL-адрес шрифта будет «https://domainname.com/fonts/Roboto-Black.ttf».

Нам нужно будет указать этот URL-адрес в нашем CSS на нашем сайте WordPress.

Вы можете либо отредактировать пользовательский CSS, либо использовать бесплатный плагин, такой как Simple Custom CSS и JS. С помощью плагина вставьте следующий код:

@font-face < font-family: 'Roboto-Black'; src: url('https://domainname.com/fonts/Roboto-Black.ttf') format('ttf'); font-weight: normal; font-style: normal; >

Вы бы, конечно, изменили «имя домена» на свое собственное доменное имя.

Как насчет стилей шрифта? Да, вам также необходимо обновить их.

Вот пример кода, который вы могли бы использовать:

body

Не забудьте сохранить и обновить страницы, когда закончите.

Важно отметить, что если Google Fonts уже интегрированы в вашу тему WordPress, вам не нужно будет размещать их локально.

Как разместить шрифты Google локально в WordPress

Размещение Google Fonts локально в WordPress аналогично размещению обычных шрифтов, которые мы только что рассмотрели.

Весь процесс становится еще проще с помощью бесплатного инструмента, такого как google-webfonts-helper, который генерирует фактический код CSS, необходимый для вашего сайта WordPress.

Для начала выберите шрифт, который вы хотите разместить локально. Например, возьмем шрифт Abhaya Libre .

Далее выберите нужные стили. Мы будем использовать обычный и полужирный (800) стили шрифта.

Вы заметите, что код CSS готов, так что скопируйте его.

Прокрутите вниз и загрузите файлы.

Файл .ZIP включает различные форматы файлов, такие как EOT, TTF, SVG, WOFF и WOFF2.

Как только вы загрузите файл, повторите процесс, который мы рассмотрели ранее, подключитесь к своему серверу в реальном времени, создайте новую папку с именем fonts и загрузите файлы.

Хотя эти шаги довольно просты, тема Astra делает их еще проще.

Astra поставляется со встроенной функцией самостоятельного размещения шрифтов Google.

Все, что вам нужно сделать, это щелкнуть параметр « Загрузить шрифты Google локально » в разделе « Внешний вид»> «Настроить»> «Производительность» , чтобы включить его.

Включив эту функцию, вы будете отправлять только один запрос Google Font API. Этот один запрос соберет все данные о шрифтах из Google и сохранит их локально на вашем сервере.

5 плагинов для шрифтов WordPress, которые стоит попробовать

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

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

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

Кроме того, Easy Google Fonts позволяет создавать собственные элементы управления шрифтами для других элементов на вашем сайте WordPress.

Плагин шрифтов | Шрифты Google Типографика

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

Пользовательские шрифты

Custom Fonts — это популярный плагин шрифтов, разработанный Brainstorm Force, командой, стоящей за очень популярной темой Astra, и несколькими другими отличными продуктами, связанными с WordPress.

Используя пользовательские шрифты, вы можете легко встраивать файлы пользовательских шрифтов, такие как EOT, SVG, TTF, WOFF, WOFF2 и OTF, на свой сайт WordPress. Плагин без проблем работает с темой Astra, конструкторами страниц Beaver Builder и Elementor.

WP Гугл шрифты

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

Пользовательские шрифты Adobe (Typekit)

Custom Adobe Fonts — еще один популярный плагин шрифтов от команды Brainstorm Force. Если вы когда-нибудь хотели легко встроить шрифты Adobe на свой веб-сайт WordPress, вам следует использовать этот плагин. Плагин работает с темой Astra и позволяет вам писать собственный CSS.

5 советов по выбору шрифта для вашего сайта

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

Итак, что вы должны учитывать при выборе шрифта для своего сайта?

1. Используйте стандартные шрифты

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

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

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

2. Выберите шрифт, который подходит для всех размеров

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

3. Выберите шрифт с четкими и различимыми буквами

Вас не спутали с похожими буквенными формами? Может, перепутали I с L или T с J? Выберите четкий шрифт, который не будет сбивать с толку вашу аудиторию. Проверьте на всех размерах экрана, чтобы убедиться.

4. Избегайте использования заглавных букв

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

5. Минимизируйте количество шрифтов

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

Часто задаваемые вопросы о шрифтах WordPress

Как изменить шрифт в моей теме WordPress?

Существует несколько способов изменить шрифты в вашей теме WordPress. Самый простой способ — получить доступ к типографике темы через настройщик WordPress. Хотя это может варьироваться в зависимости от вашей темы, если вы используете Astra, перейдите в « Внешний вид»> «Настроить»> «Глобальный»> «Типография» и измените шрифты.

Вы также можете использовать конструктор страниц, плагин, редактировать CSS и несколько других методов, упомянутых в этой статье.

Как изменить шрифт в заголовке в WordPress?

Вы можете изменить шрифт в заголовке через настройщик WordPress. Если вы используете тему Astra, вы найдете Конструктор заголовков в разделе « Внешний вид» > «Настроить» . Вы можете не только оформить свой заголовок так, как вы хотите, но вы также можете изменить шрифт каждого элемента в вашем заголовке.

Какой шрифт по умолчанию в WordPress?

Шрифт по умолчанию зависит от выбранной вами темы WordPress. Например, в теме WordPress по умолчанию на 2020 год вы найдете шрифт без засечек, используемый для заголовков, и шрифт с засечками для основного текста. В теме WordPress 2021 года вы обнаружите, что Roboto используется для заголовков и без засечек для тела.

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

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

Как просмотреть шрифт в WordPress?

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

Как вы меняете шрифты в WordPress?

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

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

Как вы меняете шрифты в WordPress? Используете ли вы какой-либо из методов, упомянутых выше? Или мы что-то упустили? Мы хотели бы знать!

Как подключить шрифт на сайт: 3 разных способа + готовый CSS шаблон

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

Одни шрифты выглядят более убедительно, другие — более интригующе.

Но как подключить любые шрифты к сайту и применять их где захочется?

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

Эксклюзивный бонус: Нажмите здесь чтобы получить ПОШАГОВЫЙ видеоурок по подключению шрифтов на сайт ( нажмите чтобы скачать ).

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

• Как установить любые шрифты за 2 минуты (WordPress) >>
• Как бесплатно подключить шрифты с сервиса Google Fonts >>
• Как гибко подключить шрифты с помощью CSS >>
• Где бесплатно взять веб-шрифты для сайта >>
• Особенности подключения шрифтов для разных CMS >>

Если у вас сайт на Wordress, читайте способ №1, он — самый простой. Если вы разбираетесь в CSS — можете сразу перейти ко второму или третьему способу.

Способ №1. Быстрое подключение шрифтов к сайту на WordPress ( cложность: ⭐ ⭐ ⭐ )

Если на ваш сайт установлена премиальная тема оформления — вы можете подключить шрифты за 2 минуты.

Вы хотите изменить шрифт заголовков своих статей. Для этого:

1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один — «настройки темы».

2. Перейдите в раздел Typography (типография).

3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):

4. Нажмите на «Сохранить изменения».

Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.

Способ №2. Используйте всю силу Google Fonts ( cложность: ⭐ ⭐ ⭐ ⭐ )

Вы когда-нибудь слышали про Google Fonts? Если вкратце — это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.

Шаг 1. Перейдите на официальный сайта сервиса.

Шаг 2. Найдите в коллекции Гугл шрифтов те, которые вам подходят. В правом меню можно сузить круг задав язык, начертание и популярность шрифта:

Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.

Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку «+»:

Вы можете добавить любые шрифты нажимая на значок «+».

Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:

Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект — нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):

Но если вам нужно только жирное начертание (для заголовков), выберите только ее.

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

Чтобы не замедлять скорость загрузки сайта выбирайте как можно меньше начертаний шрифта.

Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую «@import» и вставьте на первую строчку CSS файла вашего сайта:

Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/’вашатема’/css/. В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:

Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет ��

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

Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.

Для придания шрифта Roboto всем абзацам я напишу следующее: p

Способ №3. Кастомное подключение шрифтов с помощью CSS ( cложность: ⭐ ⭐ ⭐ ⭐ ⭐ )

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

Где взять веб-шрифты для сайта

А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?

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

Шаг 1. Перейдите на официальный сайт сервиса

Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.

Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.

Например, если есть 4 начертания, будет написано 4 Styles:

Обозначение начертаний шрифтов — нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).

Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.

Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.

Для подключения шрифтов используем @Font-face

Через директиву @font-face вы можете подключить как один, так и несколько шрифтов к своему сайту. Но у данного способа есть свои плюсы и минусы.

• Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
• Файлы шрифтов будут находится на вашем сервере — вы не будете зависеть от сторонних сервисов.

• Для правильного подключения шрифта для каждого начертания нужно прописывать отдельный код.
• Не зная CSS можно легко запутаться.

Вы можете просто скопировать мой готовый код и где нужно указать свои значения.

Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.

Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.

Шаг 2. Пропишите в самом начале CSS файла следующую запись:

@font-face font-family: 'MyWebFont'; 
src: url('../fonts/WebFont.eot'); 
src: url('../fonts/WebFont.eot?iefix') format('eot'), 
url('../fonts/WebFont.woff') format('woff'), 
url('../fonts/WebFont.ttf') format('truetype'), 
url('../fonts/WebFont.svg#webfont') format('svg'); 
font-weight: normal; 
font-style: normal; 
> 

Где MyWebFont — это название шрифта, а значение свойства src (данные в скобках в кавычках) — их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.

Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.

Шаг 3. При подключении курсивного начертания, пропишите следующее:

@font-face font-family: 'MyWebFont'; 
src: url('../fonts/WebFont-Italic.eot'); 
src: url('../fonts/WebFont-Italic.eot?iefix') format('eot'), 
url('../fonts/WebFont-Italic.woff') format('woff'), 
url('../fonts/WebFont-Italic.ttf') format('truetype'), 
url('../fonts/WebFont-Italic.svg#webfont') format('svg'); 
font-weight: normal; 
font-style: italic; 
> 

Где все то же самое, только свойству font-style мы придали значение italic.

Шаг 4. Для подключения жирного начертания, добавьте следующий код:

@font-face font-family: 'MyWebFont'; 
src: url('../fonts/WebFont-Bold.eot'); 
src: url('../fonts/WebFont-Bold.eot?iefix') format('eot'), 
url('../fonts/WebFont-Bold.woff') format('woff'), 
url('../fonts/WebFont-Bold.ttf') format('truetype'), 
url('../fonts/WebFont-Bold.svg#webfont') format('svg'); 
font-weight: bold; 
font-style: normal; 
> 

Где свойству font-weight мы задали значение bold.

Не забудьте для каждого начертания указывать правильное расположение файлов шрифтов.

Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:

@font-face font-family: 'MyWebFont'; 
src: url('../fonts/WebFont-Italic-Bold.eot'); 
src: url('../fonts/WebFont-Italic-Bold.eot?iefix') format('eot'), 
url('../fonts/WebFont-Italic-Bold.woff') format('woff'), 
url('../fonts/WebFont-Italic-Bold.ttf') format('truetype'), 
url('../fonts/WebFont-Italic-Bold.svg#webfont') format('svg'); 
font-weight: bold; 
font-style: italic; 
> 

Ну вот и все 🙂 Только что вы подключили 4 начертания шрифта на свой сайт.

Но есть одна ремарка — данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.

Как подключать шрифты для сайтов на разных CMS

Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) — если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.

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

[popup_trigger tag=»span»] Подписывайтесь на мою рассылку [/popup_trigger], чтобы не пропустить полезные и интересные публикации на блоге.

Кликните по ссылке ниже чтобы получить бесплатный доступ к ПОШАГОВОМУ видеоуроку по подключению шрифтов.

Как сменить цвет текста в WordPress (3 простых метода)

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

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

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

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

В этой статье мы рассмотрим следующие методы:

• Смена цвета текста с помощью визуального редактора (подходит для корректировки цвета некоторых слов, абзацев или заголовков).
• Изменение цвета текста в кастомайзере тем (идеальный способ для смены цвета шрифта по всему сайту, но поддерживается не всеми темами).
• Изменение цвета текста с помощью CSS (подходит для изменения цвета шрифта по всему сайту с любыми темами).

Метод 1. Изменение цвета текста с помощью визуального редактора.

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

Вот как вы можете изменить цвет текста с помощью редактора блоков.

Сначала вам нужно отредактировать пост или страницу (либо создать новую). Далее введите свой текст. Вам потребуется создать блок абзаца или заголовка в зависимости от ситуации.

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

Смена цвета текста блока

Для данного примера мы собираемся изменить цвет текста всего блока.

Нажмите на блок. С правой стороны экрана должна появиться панель Block Settings. Нажмите на стрелочку рядом с Color settings, чтобы развернуть вкладку. Вы увидите здесь настройки цвета.

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

В качестве альтернативы вы можете задать любой цвет, который вам нужно. Для этого нажмите на ссылку Custom Color. Откроется цветовая палитра, где вы можете выбрать любой цвет вручную. Вы также можете использовать палитру для ввода hex-кода цвета.

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

Совет: если вы хотите изменить цвет фона для блока, вы тоже можете сделать это здесь.

Изменение цвета текста для слова или фразы

Что делать, если вы хотите изменить цвет одного или нескольких слов? Это легко делается с помощью редактора блоков.

Сначала вам нужно выделить слово (слова), которые вы хотите изменить. Затем нажмите на небольшую стрелочку на панели инструментов редактора контента.

Далее нажмите на ссылку Text Color в нижней части списка.

Теперь вы увидите те же самые параметры, что и для всего блока. Вы можете выбрать как параметр по умолчанию, так и свой цвет с помощью Custom color.

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

Примечание: вы не можете задавать цвет фона для заголовков.

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

Меняем цвет шрифта с помощью классического редактора

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

В классическом редакторе нажмите на Toolbar Toggle в правом углу. Вы увидите еще один ряд иконок:

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

Метод 2. Смена цвета текста в кастомайзере

Как быть, если вы хотите изменить цвет текста на всем сайте? Многие из тем WordPress позволяют это делать через кастомайзер.

В качестве примера мы возьмем тему OceanWP. Это одна из лучших бесплатных тем для WordPress.

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

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

Перейдем на вкладку Typography. Ищем параметр, который позволяет менять цвет текста для постов и страниц. В OceanWP этот параметр называется «Body». Вам нужно щелкнуть по нему и настроить цвет шрифта и другие опции.

При щелчке по Font Color вы увидите цветовую палитру. Выберите любой цвет, который вы хотите использовать для вашего текста. В итоге цвет текста изменится на всех страницах и в записях.

Вы можете также изменить цвета заголовков аналогичным образом, используя соответствующие параметры для смены H1, H2 и т.д.

Когда вы будете довольны изменениями, просто нажмите на Publish в самом верху экрана.

Совет: выбор черного цвета или темно-серого для текста на белом или светлом фоне – идеальный вариант в плане удобочитаемости.

Метод 3. Смена цвета текста через CSS

Как быть, если в теме отсутствует возможность настройки цвета текста?

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

В самом низу списка опций вы можете найти вкладку с надписью Additional CSS.

Щелкните по вкладке Additional CSS. Вы увидите некоторые инструкции плюс поле, в которое вы можете ввести CSS-код.

Для начала вы можете попробовать ввести следующий код в данное поле:

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

Если вы хотите изменить цвет заголовков в своих постах, вы можете добавить следующий код:

Опять же, вы можете сменить hex-код на любой другой цвет.

Если вы не знакомы с CSS, то в таком случае вы можете попробовать плагин CSS Hero. Это мощный визуальный редактор, который позволяет настраивать стили своего сайта.

Добавление пользовательских шрифтов

Веб-шрифт – один из способов создания индивидуального стиля письма. В email-редакторе eSputnik вы можете добавить шрифт из библиотеки Google Fonts или другого источника.

Наборы шрифтов в eSputnik

eSputnik предлагает три набора шрифтов для ваших писем:

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

Кастомные шрифты позволяют создавать индивидуальный дизайн писем.

Почтовые клиенты, которые поддерживают кастомные шрифты:

• iOS Mail и Apple Mail;
• Outlook 2016 и Outlook 2011 for Mac;
• Android App и Android Mail 2.3, 4.2, 4.4;
• Lotus Notes 8.

Добавление своего шрифта в eSputnik

1. Создайте или откройте email-сообщение.
2. На верхней панели инструментов нажмите значок “три точки” и выберите “Мои шрифты”.

1. Нажмите кнопку “Добавить шрифт”.

1. В окне “Новый шрифт” заполните параметры:

• Название шрифта
• URL з CSS-файлом
• Семейство

Все поля обязательны для заполнения.

Получить параметры шрифта можно одним из способов:

• используя библиотеку Google Fonts (или другую библиотеку шрифтов),
• создав свой шрифт.

1. Нажмите “Готово”.
2. Подтвердите перезагрузку страницы.

После обновления страницы добавленный шрифт появится в общем списке шрифтов.

Вы можете выбрать “Не перезагружать”, если ранее внесенные в сообщение изменения не сохранялись. После этого сохраните письмо и снова войдите в него – шрифт станет доступным.

Добавление шрифта из Google Fonts

1. Перейдите по ссылке fonts.google.com.

Если вы знаете название шрифта, воспользуйтесь поиском или отфильтруйте шрифты по категориям, языкам, свойствам (количеству стилей, толщине, скосу, ширине и т.п.).

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

Выберите один из вариантов, поскольку несколько стилей не загрузятся одновременно. Если вам нужно все семейство шрифта, его тоже следует загружать поочередно: например сначала добавляется regular, затем medium, bold и так далее. В email-редакторе eSputnik они добавятся как отдельные шрифты.

К примеру добавим шрифт “Barlow” стиля “SemiBold 600”.

1. Кликните поле шрифту.

1. Нажмите “SemiBold 600 +”, а потом иконку корзины для выбора стиля шрифта и показа блока с его параметрами.

1. В email-редакторе перейдите на вкладку “Мои шрифты” и нажмите кнопку “Добавить шрифт”.

1. В окне “Новый шрифт”добавьте название шрифта.

1. Во вкладке “” скопируйте содержание атрибута href в таком виде:

https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap

1. Вставьте скопированную ссылку в поле “URL з CSS-файлом”.

1. В секции “CSS rules to specify families” скопируйте название семейства шрифта в одном из форматов::

• Barlow
• ‘Barlow’
• ‘Barlow’, sans-serif
• ‘Barlow’, sans-serif;

1. Вставьте скопированное название в поле “Семейство” и нажмите “Готово”.

Введите название семейства так, как оно отмечено в библиотеке шрифтов. Шрифт не будет работать, если в поле вписать произвольное имя.

1. Нажмите кнопку “Перезагрузить сейчас” и подтвердите перезагрузку страницы.

Добавление собственного шрифта

Рассмотрим на примере ресурса Font Squirrel.

Чтобы загрузить собственный шрифт, в поле “URL с CSS-файлом” нужно добавить ссылку на CSS-файл на вашем сервере.

1. Перейдите оп ссылке fontsquirrel.
2. Подготовьте и загрузите файл шрифта в формате TTF, нажав “Upload fonts”.

1. Нажмите “Download your kit” и загрузите сгенерированный архив в котором будет файл stylesheet.css.

1. В файле stylesheet.css нужно указать src — расположение (URL) на вашем сервере необходимого шрифта в формате woff2 (шрифт этого формата будет в архиве), например:

@font-face < font-family: 'Spartan'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/manrope/v1/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 

1. Загрузите файл stylesheet.css на сервер.
2. В email-редакторе перейдите на вкладку “Мои шрифты” и нажмите кнопку “Добавить шрифт”.

1. В окне “Новый шрифт”добавьте название, URL з CCS-файлом с вашего сервера, семейство шрифта и нажмите “Готово”.

1. Подтвердите перезагрузку страницы.

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

Все шрифты после добавления можно сразу использовать в email-сообщениях.

1. Перейдите к сообщению и выделите текст.
2. Нажмите вкладку “Шрифт” и выберите нужный.

1. К выделенному тексту будет применен шрифт.

Редактирование/удаление шрифта

Чтобы отредактировать или удалить шрифт:

1. В email-редакторе перейдите на вкладку “Мои шрифты”.
2. Нажмите значок карандаша для редактирования или значок крестика для удаления шрифта.

Особенности работы с кастомными шрифтами

1. Если шрифт не отображается, проверьте, есть ли он на устройстве, на котором вы просматриваете сообщение. Если его нет, текст будет выведен стандартным шрифтом.
2. Некоторые шрифты поддерживаются только для языков с латинским алфавитом и цифр, поэтому с кириллическим текстом они не сработают.
3. Кастомные шрифты лучше не использовать для основного текста, а размещать на картинках, например добавлять к тексту баннера, тогда шрифт отобразится так, как вы задумали.
4. Текст названия сообщения, темы и скрытого предзаголовка будут стандартными, поскольку шрифт определяется почтовым клиентом.
5. Используя пользовательский шрифт, позаботьтесь о том, как он отобразится в почтовых клиентах, которые его не поддерживают, поскольку при замене на стандартный текст может не хватить места, и верстка будет нарушена. Предусмотрите это: проведите тест, пропишите альтернативное семейство, размер и отступы для корректного отображения письма.

Главная eSputnik / Поддержка / Email / Работа с емейл-редактором / Добавление пользовательских шрифтов