База знаний
Эта статья поможет разобраться каким образом можно изменить шрифт различных элементов на сайте работающим под управлением WordPress. Мы разберем несколько способов.
Стандартный набор тем имеющихся в WordPress по умолчанию, после установки движка, достаточно скуп по функционалу. В том числе в них нет и настроек связанных с изменением шрифтов. Для нас это хорошо, так как поняв как изменить шрифт заголовков статей в стандартных темах WordPress, мы без труда это сделаем и на других темах. Именно заголовков, потому что это наиболее информативный элемент нашего сайта на WordPress, и владельцы сайтов зачастую хотят изменить шрифт именного этого элемента на сайте.
Хочется отметить, что перегружать сайт различными шрифтами не стоит. Достаточно использовать пару, максимум тройку, шрифтов на вашем сайте. В тексте желательно использовать только различное форматирование одного и того же шрифта: курсив, жирность, подчеркивание, размер. Мнение, что загрузив сайт различными шрифтами мы сделаем его более красивым и стильным, ошибочно. Если только у вас не стоят иные задачи и вы это делаете намеренно, и это, допустим, входит в вашу концепцию.
Итак перейдем к способам изменения шрифта на сайте WordPress.
Перед любыми изменениями вносимыми вами на сайт желательно создать полную резервную копию вашего сайта. Эта привычка убережет вас от множества проблем при работе с ваши сайтом.
В настройках темы WordPress
Как уже было сказано выше в стандартных темах WordPress нет встроенных настроек шрифтов. Поэтому пользователям стандартных тем этот способ не подойдет. Это вариант для тех у кого установлена другая тема WordPress. Все зависит, конечно от конкретной темы, говорить однозначно, что настройка шрифтов есть во всех темах будет не верно, но вероятность того, что вы найдете эту настройку в своей теме очень высока.
Итак как изменить шрифт заголовка статьи в настройках темы? Почему именно заголовка статьи, сказано было уже выше. В конце, концов этот пример наиболее нагляден и информативен.
В административной части, сайта на WordPress, идем в настройки темы по пути — Внешний вид — Настроить и оказываемся на странице настроек нашей темы. Скорее всего вы увидите раздел Типографика, Типография, Typography, Шрифты или что либо подобное, в зависимости от вашей темы WordPress. Переходим в этот раздел и настраиваем шрифт заголовка H1 или H2, именно он применяется в WordPress для заголовков статей.
Как правило, на предложат список системных шрифтов, поддерживаемых большинством браузеров по умолчанию, и большой список Google шрифтов. Остановимся подробнее на Google шрифтах.
Google fonts это библиотека свободных шрифтов для сайтов. Шрифт Google нужного семейства и начертания подгружается браузером с серверов Google вместе с вашим сайтом. Библиотека Google предлагает, на момент написания статьи, более 959 различных шрифтов. Отметим сразу, что большинство шрифтов не поддерживает кириллицу и использовать их на русскоязычном сайте смысла нет. На момент написания статьи, кириллических шрифтов в библиотеке нашлось 106.
Открыв длинный список Google шрифтов в настройках темы, мы столкнемся с ситуацией подбора шрифтов методом тыка. Большинство изменений не приведет к результату, так как только каждый десятый шрифт поддерживает кириллицу. Простой выход заключается подборе нужного нам шрифта на сайте Goole Fonts, переключив настройку Language на Cyrillic. Выбрав понравившийся нам шрифт, мы легко найдем его в длинном списке в настройках темы WordPress. На картинке выше приведен пример изменения шрифта заголовка статьи WordPress, с использованием темы GeneratePress, на компактный Open Sans Condensed. В некоторых темах есть возможность прямо в настройках выбора шрифта указать, что нам необходимы только кириллические шрифты, но это есть далеко не во всех темах.
Мы разобрали как изменить шрифт заголовка статьи WordPress используя возможности настройки темы.
Подключение Google шрифтов к сайту WordPress методом непосредственного редактирования файлов темы
Этот способ подойдет тем кто использует любые темы WordPress, так как мы будем вносить изменения непосредственно в код файлов темы.
Сразу предупрежу, что способ подойдет тем, кто хоть не много знаком с разметкой html и файлами CSS стилей и не пугается их редактировать. Так же не забывайте о предварительном резервном копировании сайта.
Начнем с предварительного выбора понравившегося вам шрифта на сайте Google Fonts. Находим нужный шрифт и нажимаем на знак + в правом верхнем углу контейнера со шрифтом. Можно выбрать несколько шрифтов если нужно подключить к сайту WordPress несколько шрифтов.
Затем открываем всплывающее наверх окно в правом нижнем углу — Family Selected. Переходим во вкладку CUSTOMIZE и отмечаем, что нам нужны кириллические шрифты.
Во вкладке EMBED выбираем @IMPORTи копируем код, в нашем случае это:
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap&subset=cyrillic');Теги и
копировать не нужно.
Мы отказываемся от варианта редактирования html-заголовка нашего сайта по причине того, что прямое редактирование кода темы не совсем корректно. Мы используем мощную систему CMS WordPress и при очередном обновлении нашей темы можем потерять сделанные нами вручную изменения.
Корректный способ добавления этого кода к нам в тему через её настройки в Административной панели WordPress вашего сайта. Внешний вид — Настроить — Дополнительные стили.
После добавления этого кода в Дополнительные стили при каждой новой загрузке сайта клиентским браузером будут загружаться выбранные вами шрифты с серверов Google.
Настало время указать браузеру какие именно элементы вашего сайта должны использовать этот шрифт, добавив код дополнительного стиля в настройки вашей темы WordPress. Само правило необходимо взять из того же окна Family Selected на сайте Goggle Fonts на вкладке EMBED чуть ниже.
В нашем случае это:
font-family: 'Poiret One', cursive;Теперь найдем какому конкретно элементу нашего сайта присвоить это правило. Сделать это можно с помощью инструментов для вебмастеров браузеров Chrome или Firefox. Перейдем на страницу с любой записью на вашем сайте и выделим текст заголовка. В меню правой кнопки мыши выберем — Посмотреть код или Исследовать элемент, в зависимости от используемого вами браузера.
Из приведенного примера видно, что заголовку статьи в используемой нами теме GeneratePress был присвоен класс .entry-title. В разных темах заголовку статьи может быть присвоен разный класс. Тут нужно повнимательней изучить код сайта в браузере и найти нужный нам класс. Попробуем использовать использовать класс .entry-title, полученный нами при изучении кода темы GeneratePress, в настройках Дополнительных стилей. Необходимо добавить следующий код:
.entry-title
При изучении кода стандартной темы WordPress Twenty Nineteen, можно увидеть что для заголовков статей используется класс .entry .entry-title:
Вставляемый в этом случае код:
.entry .entry-title
Добавить CSS стиль в тему сайта на WordPress можно несколькими способами, включая описанный нами :
- Добавить код в файл стилей на прямую из файлового менеджера на хостинге или отредактировать его локально скачав по FTP;
- Добавить код в файл стилей из административной панели WordPress в Редакторе стилей темы;
- Добавить код стиля в настройках Дополнительных стилей используемой темы WordPress.
У первых двух способов, как уже говорилось в этой статье, есть свои недостатки. При обновлении темы скорее всего будут обновлены и файлы с css стилями и вы потеряете свои настройки шрифтов. Так же нужно отметить, что некоторыми темами используются, так называемые mini файлы со стилями, сжатые или минимизированные файлы, трудно понятные человеком, но быстро читаемые браузером. В административной части WordPress, в редакторе некоторых тем, сжатые css файлы не отображаются .
Внедрение стороннего шрифта на сайт.
Это пожалуй самый продвинутый добавить сторонний шрифт на сайт. Файлы со шрифтами хранятся на вашем сервере, вместе с файлами сайта. В этом случае вы не зависите от сторонних сервисов. Загрузка шрифта происходит быстрее. Выбор шрифтов практически не ограничен.
Более того есть случаи когда это единственный выход внедрения шрифта на сайт. Допустим нужен конкретный шрифт, а он на сервисе Google Fonts не имеет кириллического начертания. Например шрифт Raleway на Google Fonts не поддерживает кириллицу. Этот же шрифт можно найти в интернете с поддержкой русских букв. Например на сайте WebFonts.pro. На этом же сайте можно найти множество других шрифтов, очень красивых и оригинальных.
Рассмотрим процесс внедрения шрифта в стандартную тему Twenty Nineteen сайта WordPress, на примере шрифта Raleway скаченного с сайта WebFonts.pro
Скачиваем архив с файлами шрифта по ссылке данной выше.
Нужно разархивировать содержимое архива в отдельную директорию у себя локально на компьютере. Открыв файл demo.html в браузере выберем нужное нам начертание шрифта. Чтобы получить начертания скаченных нами шрифтов, нужно открывать именно из разархивированной директории, а не из архива.
На мой взгляд, очень элегантно для заголовка смотрится начертание Raleway Thin:
Сохраним css правило из примера на демо странице для его внедрения на сайт:
.your-style
Как мы уже выяснили ранее в этой статье в теме Twenty Nineteen для заголовков статей используется класс .entry .entry-title .
Отредактируем полученный нами код и получим:
.entry .entry-title
Далее нужно в любом файловом менеджере используемом вами для доступа к файлам сайта открыть директорию /wp-content/themes/twentynineteen/fonts/ и закачать туда все файлы со шрифтами полученными нам в архиве. Файлы demo.html и stylesheet.css закачивать на сайт не нужно. Они очень наглядно показывают пример внедрения скаченного шрифта на сайт.
У себя локально на компьютере открываем файл с примерами стилей stylesheet.css
Находим фрагмент кода, понравившегося нам начертания:
@font-face
Необходимо отредактировать в этом коде путь до файла со шрифтом на нашем сайте. В нашем случае это: /wp-content/themes/twentynineteen/fonts/ .
Получим следующий код:
@font-face < font-family: 'Raleway'; src: url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.eot'); src: local('/wp-content/themes/twentynineteen/fonts/Raleway Thin'), local('Raleway-Thin'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.eot?#iefix') format('embedded-opentype'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.woff') format('woff'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; >Далее будем использовать уже описанный нами в этой статье способ внедрения css стиля на сайт через настройки Дополнительных стилей темы. Внешний вид — Настроить — Дополнительный стили.
Приведу еще раз весь код который необходимо добавить:
@font-face < font-family: 'Raleway'; src: url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.eot'); src: local('/wp-content/themes/twentynineteen/fonts/Raleway Thin'), local('Raleway-Thin'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.eot?#iefix') format('embedded-opentype'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.woff') format('woff'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; >.entry .entry-title
Вы этой статье мы подробно разобрали как внедрить шрифт на сайт под управлением CMS WordPress несколькими способами.
- WordPress
- 114 Пользователи нашли это полезным
Связанные статьи
Фавикон это значок вашего сайта или страницы в интернете. Используется браузерами, приложениями и.
Не для кого не секрет что заголовок страницы важный компонент SEO и он необходим на страницах со.
В сети есть так называемые службы обновления или, другими словами, службы слежения за.
В этой инструкции рассмотрим вариант смены пароля от администратора WordPress в случае его.
Как изменить шрифт на сайте WordPress
Здравствуйте, друзья! В этом уроке мы разберем с Вами как изменить шрифт на сайте WordPress. Устанавливать новый шрифт будем с Google Fonts, так как это самый популярный, простой и надежный сервис с огромным выбором шрифтов. Итак, приступим!
Как подключить на сайт шрифт с Google Fonts
1. Сперва нужно выбрать шрифт, который мы будем устанавливать на сайт. Для этого переходим на сайт Google Fonts и сразу же сортируем шрифты так, чтобы они были «кириллические». Если этого не сделать, то подключенный шрифт может не работать с русским или украинским текстом.
Также можно отсортировать шрифты по типу и другим параметрам.
2. Теперь выберите из списка понравившийся шрифт и нажмите кнопку «Quick-use».
3. В открывшемся окне нужно отметить галочками стили (к примеру Normal, Medium, Bold), которые собираетесь использовать на сайте. Также рекомендую ставить галочку и на латинским наборе, так как зачастую на сайте используются и латинские буквы.
4. Далее нужно подключить выбранный шрифт на сайт. Для этого прокручиваем станицу чуть ниже и выбираем один из предложенных способов подключения.
Давайте разберем более детально способы подключения Standard и @import.
Способ 1
Standard — нужно скопировать строчку подключения шрифта и добавить ее в шапку сайта.
Сделать это очень просто. Переходим с административной панели в Внешний вид -> Редактор -> Заголовок (header.php) и добавляем код в содержимое тега . Результат будет выглядеть так (на примере темы Twenty Twelve):
Способ 2
@import — нужно скопировать и добавить код в CSS стили сайта.
О том, как открыть и редактировать CSS стили мы говорили в одном из прошлых уроков.
Важно! Используйте только один способ подключения, не нагружайте зря сайт.
Использование нового шрифта на сайте
После подключения шрифта нужно указать, на каких текстовых элементах сайта он будет использоваться. Для этого скопируйте строчку в самом низу страницы Google Fonts и добавьте ее к классам и идентификаторам, у которых хотите заменить шрифт.
К примеру, для изменения шрифта на заглавиях h1, h2, h3 нужно добавить (или заменить, если для элементов уже установлен какой-то шрифт) такой код:
h1, h2, h3
Как видите, сложного совершенно ничего нету. Изменить шрифт на сайте — дело 5 минут.
В случае, если у Вас что-то не получилось или возникли вопросы — смело пишите в комментариях.
Здравствуйте, друзья! В этом уроке мы разберем с Вами как изменить шрифт на сайте WordPress. Устанавливать новый шрифт будем с Google Fonts, так как это самый популярный, простой и надежный сервис с огромным выбором шрифтов. Итак, приступим! Как подключить на сайт шрифт с Google Fonts 1. Сперва нужно выбрать шрифт, который мы будем устанавливать на сайт. Для этого переходим на сайт Google Fonts и сразу же сортируем шрифты так, чтобы они были «кириллические». Если этого не сделать, то подключенный шрифт может не работать с русским или украинским текстом. Также можно отсортировать шрифты по типу и другим параметрам. 2. Теперь выберите из списка понравившийся шрифт и…
Как изменить шрифт редактора WordPress в режиме HTML
Меня всегда раздражал шрифт визуального редактора, который используется в WordPress по-умолчанию в режиме HTML — ну не соответствует он техническим текстам. Перебрал кучу плагинов, и не нашел ни одного, напрямую меняющего шрифт в редакторе. Но все же поиски принесли плоды — оказывается можно поменять шрифт вообще без плагинов.
Чтобы сменить шрифтв редакторе WordPress, работающем в режиме HTML, на тот, который нравится вам, можно применить фильтр, воспользовавшись файлом functions.php. Вставьте в этот файл такой код:
Как изменить размер шрифта описания товара?
в описании товара очень мелкий шрифт.
Как его увеличить?
Ссылка на проблему https://lavka-lesnika.ru/product/varene-iz-lesnoj-cherniki/
tuxfighter
Гуру
Местный
Наверняка это есть в настройках.
.woocommerce div.product .woocommerce-tabs .panel
Stripedfly
Новичок
Наверняка это есть в настройках.
.woocommerce div.product .woocommerce-tabs .panel
Настройки ковыряла несколько дней и так и не нашла, а с Вашим кодом всё как нужно, спасибо!
straleksey
Новичок
Наверняка это есть в настройках.
.woocommerce div.product .woocommerce-tabs .panel
Будьте так добры, напишите поподробнее куда этот код нужно вставить, очень Вас прошу помочь!
tuxfighter
Гуру
Местный
все стили вставляются в style.css дочерней темы или в внешний вид — настройка — дополнительные стили
straleksey
Новичок
все стили вставляются в style.css дочерней темы или в внешний вид — настройка — дополнительные стили
Нашел, сделал,но мне не помогло!
Опишу проблему подробнее, в кратком описании товара, что на главной странице текст очень мелкий ели заметный а на самой странице товара он имеет обычный размер, я не могу найти нигде ту часть кода которая бы отвечала за размер описания текста на главной странице.