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

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

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

Важность использования пользовательских шрифтов

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

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

Альтернативы Google Fonts

Google Fonts и Adobe Edge Fonts бесплатны. Поэтому предоставляемые ими шрифты не уникальны. Вот еще несколько сервисов для поиска шрифтов:

1. TemplateMonster – здесь представлено много шрифтов для личного использования за небольшую цену. Также они доступны в ONE web development kit .
2. MyFonts – сервис предлагает самый большой выбор шрифтов в мире. Но их стоимость достаточно высокая.
3. FontSpring – сервис продает современные шрифты для коммерческого использования. Но практически в любом семействе есть 1-2 бесплатных шрифта. Кроме этого доступен раздел с бесплатными шрифтами.
4. Cufonfonts – еще одна обширная коллекция разнообразных шрифтов. Здесь представлено много бесплатных шрифтов, разделенных на отдельные категории.
5. Dafont – коллекция сервиса состоит из 3500 бесплатных шрифтов. Большинство из них предназначены только для личного использования. Здесь можно выбрать шрифты в стиле комиксов, видеоигр, винтажные или стилизованные под японские символы.

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

Есть несколько способов добавить шрифты в WordPress-сайт:

1. С помощью плагинов .
2. Вручную .
3. Темы оформления : многие темы оформления WordPress включают в себя встроенные параметры для настройки шрифтов.

Вариант 1 – с помощью плагинов

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

Характеристики плагинов для смены шрифтов

Специализированный плагин должен обеспечивать следующее:

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

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

Custom Font Uploader

ПОСМОТРЕТЬ ДЕМО УЗНАТЬ БОЛЬШЕ И СКАЧАТЬ

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

Use Any Font

УЗНАТЬ БОЛЬШЕ И СКАЧАТЬ

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

WP Google Fonts

УЗНАТЬ БОЛЬШЕ И СКАЧАТЬ

Плагин позволяет использовать каталог шрифтов Google. Одним из преимуществ этого плагина является добавление около 1000 шрифтов Google.

Как установить шрифты с помощью плагина?

В качестве примера рассмотрим плагин WP Google Fonts. Установите этот плагин из официального репозитория WordPress и откройте раздел Google Fonts.

Выберите необходимые шрифты и настройте их.

Вариант 2 – установка пользовательских шрифтов вручную

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

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

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

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

Шаг 1. Создайте папку «fonts»

В дочерней теме оформления создайте новую папку «fonts». Она должна располагаться в каталоге wp-content/themes/your-child-theme/fonts

Шаг 2. Загрузите файлы шрифтов на сайт

Это можно сделать через панель управления хостингом или с помощью FTP. Добавьте необходимые файлы шрифтов в недавно созданную папку «fonts».

Шаг 3. Импорт шрифтов с помощью таблицы стилей дочерней темы оформления

Откройте файл style.css дочерней темы оформления и добавьте приведенный ниже код в начало файла CSS:

MyWebFont —имя шрифта, а значение свойства src — его местоположение (относительные ссылки). Нам необходимо указать ссылку на каждый стиль отдельно. Первоначально мы устанавливаем для свойств font-weight и font-style значение normal.

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

Здесь мы дополнительно добавили свойство font-style: italic.

Шаг 5. Чтобы добавить жирный шрифт:

Мы устанавливаем свойство font-weight: bold.

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

Мы подключили четыре стиля шрифта.

Заключение

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

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

Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, лайки, подписки, отклики, дизлайки низкий вам поклон!

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, лайки, подписки, дизлайки, отклики низкий вам поклон!

Сергей Бензенко автор-переводчик статьи « How to Add Custom Fonts to your WordPress Site »

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

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

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

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

В большинстве современных шаблонов (тем оформления) изменения шрифтов делается довольно просто — из настроек самого шаблона в админке Вордпресса.

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

1. Админка — Внешний вид — Настроить. Тут откроется менюшка, в которой можно произвести кастомизацию шаблона, исходя из его возможностей.

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

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

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

Как правило находятся настройки почти там же, Админка — Внешний вид- Theme options (или название шаблона). Либо может быть нужная опция просто в админке добавится с названием шаблона.

Внутри также ищите необходимые настройки шрифтов.

Это были относительно простые способы. Далее мы рассмотрим варианты, когда в самой теме оформления ВП нет необходимых настроек для шрифтов.

Как поменять цвет шрифта в Вордпресс через CSS

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

Для того что бы поменять цвет шрифта существует CSS правило color. Выглядит это примерно так в коде:

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

Хорошая новость — вам вовсе не обязательно учить все правила и коды цветов, достаточно иметь современный браузер и воспользоваться инструментом просмотра кода (CTRL+Shift+I для хрома)

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

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

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

Копируем данный код и сохраняем по следующему адресу: Админка — Внешний вид — Настроить — Дополнительные стили

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

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

Как изменить размер шрифта

По аналогии с изменением цвета, все тоже самое, только вместо атрибута color для указания размера текста используется атрибут
font-size. Несколько правил записываются вместе, с новой строки через; Выглядит это будет так вместе с цветом и размером:

Где 17px это указание размера шрифта в пикселях. Можете подобрать оптимальные для себя значения изменяя эту цифру.

Как изменить семейство шрифта на ВП

Но что делать если изначально шрифт на сайте вам не нравится и вы хотите другой? Тут все сложнее.

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

За семейство шрифтов отвечает CSS правило font-family и выглядит полностью оно так в нашем примере:

Где font-family это атрибут семейства, а перечисления Arial, Helvetica, Sans-Serif через запятую это указания шрифтов и типа шрифтов.

В первую очередь браузером будет браться тот шрифт, который указан первым, т.е. Arial в нашем случае. Остальные в списке это запасные, они будут использоваться браузером только в том случае, если у пользователя не найдется на компьютере шрифта Arial (что вряд ли возможно ибо он стандартный для браузеров). Но как правило, не используются.

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

Либо можно зайти на сайт того же гугла https://fonts.google.com/ и подобрать там что-то интересное, а затем следуя несложной инструкции подключить данный шрифт на свой сайт.

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

А какой у вас любимый шрифт для сайта? Мои например это PT Sans, Tahoma и Verdana

Просто и быстро поменять шрифты на wordpress сайте

Полезное для сайта

Привет, сегодня я расскажу вам и покажу, как можно очень просто поменять шрифты на сайте wordpress. Раньше я помню у меня бывало такое, найдёшь тему классную, а шрифты на ней ужасные, устаревшие, всю картину портят и не понятно было как изменить эти шрифты. Лезть в код и наугад там, что-то менять, дело муторное и не безопасное. Но, на днях я наконец-то узнал, как можно очень просто и быстро поменять шрифты на wordpress сайте. Оказывается всё просто, когда под рукой есть отличный плагин — Easy Google Fonts.

С помощью данного плагина вы не только сможете изменить шрифты для всех основных заголовков сайта — Heading 1,2,3,4,5,6, но и поменять шрифт для текста в записях и на страницах. Менять шрифт вы сможете прямо из настройщика wordpress, Внешний вид — Настроить. Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

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

— Paragraphs, в данном поле вы сможете изменить шрифт для текста в записях и на страницах.

— Heading 1, здесь можно изменить шрифт для самых больших заголовков на вашем сайте.

— Heading 6, самые маленькие заголовки на вашем сайте.

Если вы хотите поменять только шрифт, то используйте значение — Font Family , остальные параметры не трогайте.

— Script/Subset, набор шрифтов, рекомендую выбрать — All Subsets .

— Font Weight/Style, можно изменить насыщенность и стиль шрифта.

— Text Decoration, можно сделать текст подчёркнутым, перечёркнутым и черта сверху текста.

— Text Transform, можно сделать текст только из больших букв или только из маленьких.

На этом всё, остальные параметры я не стал разбирать, так как это просто ни к чему, да и на некоторых темах они просто не работают. Да и ещё если вы поменяли шрифт для заголовков h1 то и для других заголовков устанавливайте такой же шрифт, чтобы не было потом разногласий, а то вдруг захотите в текст добавить заголовок h2. Жду ваших комментариев, до новых встреч !