Как изменить шрифт на сайте WordPress. Изменить шрифт на сайте на wordpress
Как изменить шрифт на сайте WordPress
Здравствуйте, друзья! В этом уроке мы разберем с Вами как изменить шрифт на сайте WordPress. Устанавливать новый шрифт будем с Google Fonts, так как это самый популярный, простой и надежный сервис с огромным выбором шрифтов. Итак, приступим!
Как подключить на сайт шрифт с Google Fonts
1. Сперва нужно выбрать шрифт, который мы будем устанавливать на сайт. Для этого переходим на сайт Google Fonts и сразу же сортируем шрифты так, чтобы они были «кириллические». Если этого не сделать, то подключенный шрифт может не работать с русским или украинским текстом.
Также можно отсортировать шрифты по типу и другим параметрам.
2. Теперь выберите из списка понравившийся шрифт и нажмите кнопку «Quick-use».
3. В открывшемся окне нужно отметить галочками стили (к примеру Normal, Medium, Bold), которые собираетесь использовать на сайте. Также рекомендую ставить галочку и на латинским наборе, так как зачастую на сайте используются и латинские буквы.
4. Далее нужно подключить выбранный шрифт на сайт. Для этого прокручиваем станицу чуть ниже и выбираем один из предложенных способов подключения.
Давайте разберем более детально способы подключения Standard и @import.
Способ 1
Standard — нужно скопировать строчку подключения шрифта и добавить ее в шапку сайта.
Сделать это очень просто. Переходим с административной панели в Внешний вид -> Редактор -> Заголовок (header.php) и добавляем код в содержимое тега <head></head>. Результат будет выглядеть так (на примере темы Twenty Twelve):
Способ 2
@import — нужно скопировать и добавить код в CSS стили сайта.
О том, как открыть и редактировать CSS стили мы говорили в одном из прошлых уроков.
Важно! Используйте только один способ подключения, не нагружайте зря сайт.
Использование нового шрифта на сайте
После подключения шрифта нужно указать, на каких текстовых элементах сайта он будет использоваться. Для этого скопируйте строчку в самом низу страницы Google Fonts и добавьте ее к классам и идентификаторам, у которых хотите заменить шрифт.
К примеру, для изменения шрифта на заглавиях h2, h3, h4 нужно добавить (или заменить, если для элементов уже установлен какой-то шрифт) такой код:
h2, h3, h4 { font-family: 'Roboto', sans-serif; }
h2, h3, h4 { font-family: 'Roboto', sans-serif; } |
Как видите, сложного совершенно ничего нету. Изменить шрифт на сайте — дело 5 минут.
В случае, если у Вас что-то не получилось или возникли вопросы — смело пишите в комментариях.
learnprosoft.com
Как изменить шрифт на сайте на движке Wordpress / webentrance.ru
Как изменить шрифт на сайте? Такой вопрос возникает у сайтостроителей, стремящихся улучшить отображение своего контента, но здесь скрывается одна серьезная ошибка.
Часто сайтостроители выбирают не очень распространенный шрифт, но дело в том, что не у каждого посетителя может быть на компьютере именно такой шрифт.
И тогда сайт будет отображаться только такими шрифтами, которые будут определены браузером вашего посетителя и это будет не очень хорошо.
Содержание:
Подключение библиотеки шрифтов
Однако, чтобы изменить шрифт, есть выход, который состоит в том, что существует возможность подключения необходимой библиотеки.
Шрифт в этом случае подгружается с сервера Google и тогда выбранный сайтостроителем шрифт будет отображаться в браузере любого посетителя.
Для начала откроем библиотеку шрифтов Google по адресу www.google.com/fonts, слева в скриптах выбираем кириллицу – Cyrillic, то есть такие шрифты, которые поддерживают русский язык.
Выберем какой-нибудь понравившийся шрифт, чтобы было более наглядно, пусть будет этот.
Затем открываем код шрифта, нажимая на Quick-use, и в этом же окне справа Google советует обратить внимание на скорость загрузки.
Дело в том, что если мы решили подгружать шрифт со стороннего сервера, то это в той или иной мере будет влиять на скорость загрузки страницы.
Поэтому Google честно предупреждает пользователей и советует не злоупотреблять таким приемом.
Потому что, если использовать несколько разных шрифтов на странице, то есть загружать несколько скриптов, то это на загрузке страницы обязательно отразится в худшую сторону.
Поэтому выбирать нужно что-то одно, чтобы не ухудшить опять же скорость загрузки страниц сверх меры.
В данном случае стрелка находится в зеленом секторе, и выбранный шрифт будет оказывать небольшое влияние на загрузку страницы. Шрифт поддерживает латинские и русские символы.
Как изменить шрифт на сайте
В этом же окне на сервисе, ниже, в пунктах 3 и 4, приводятся необходимые коды.
Из пункта 3 копируем предложенный код в буфер обмена и вставляем в заголовок сайта или какой-либо одной статьи, например, Редактирование изображений без фотошоп.
Чтобы изменить шрифт на сайте, придерживаемся следующего алгоритма:
- Нажимаем правой кнопкой мыши на тексте выбранной статьи, в контекстном меню находим пункт Просмотр кода элемента.
- В открывшемся окне опять правой кнопкой мыши открываем заголовок сайта, выбираем пункт Редактирование HTML и в поле вставляем предлагаемый сервисом код.
Все эти попытки изменить шрифт на самом деле никак не повлияют на сайт. Все изменения пока только для наглядности, чтобы посмотреть, как будет выглядеть выбранный текст на сайте.
- Теперь нужно определиться с блоком, который отвечает за вывод этого текста. Справа видим параметры, отвечающие за сам шрифт – за размер, стиль и т. д. Именно сюда будем добавлять код из пункта 4.
И теперь можно просмотреть страницу, на которой мы решили изменить шрифт на экзотический.
Рукописный шрифт читать, правда, не совсем удобно, но смотрится, в принципе, неплохо. Таким образом, поставленную задачу, как изменить шрифт на сайте, решить можно.
Разберемся, как это сделать непосредственно в исходном коде, потому что до этого все наши манипуляции сойдут на нет, если мы обновим страницу.
Переходим в панель управления WordPress и здесь необходимо изменить исходный код страницы. В панели управления идем по маршруту – Внешний вид – Редактор.
Находим файл, отвечающий за заголовок – header.php, открываем его и нужно установить код до закрытия тега </head>, то есть вставляем сюда вызов библиотеки – код из пункта 3. Обновляем файл.
Затем нужно открыть таблицу стилей и найти нужный нам класс. Каждый блок имеет свой класс, посмотреть его можно в окне Просмотр кода элемента и там же отображается номер строки, где эти условия прописаны. В данном случае это class=”art-postcontent.clearfix”.
Нужный класс в окне таблицы стилей можно найти при помощи поиска, набрав сочетание клавиш Ctrl+F. Вводим в строку поиска art-postcontent.clearfix и получаем выделение его в таблице стилей. Сюда добавляем необходимый скрипт из пункта 4.
Все шрифты, которые были прописаны до этих изменений, можно не удалять на тот случай, если вдруг произойдет какой-то сбой, например, не подгрузится в нужный момент библиотека, то ваш сайт все равно будет работать и нормально отображаться.
Теперь при открытии любой статьи на сайте текст будет выглядеть с выбранным шрифтом, который нам понравился.
Эти изменения будут также сохраняться при открытии сайта в любом другом браузере при условии, если кэш браузера будет почищен. Иначе страницы могут загружаться из него и изменений можно сразу и не увидеть.
Итак, теперь нам известно, как изменить шрифт на сайте быстро и просто, для чего потребуется лишь подключить библиотеку Google и выбрать нужный шрифт.
Другие записи по теме:
webentrance.ru
Просто и быстро поменять шрифты на 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, можно сделать текст только из больших букв или только из маленьких.
На этом всё, остальные параметры я не стал разбирать, так как это просто ни к чему, да и на некоторых темах они просто не работают. Да и ещё если вы поменяли шрифт для заголовков h2 то и для других заголовков устанавливайте такой же шрифт, чтобы не было потом разногласий, а то вдруг захотите в текст добавить заголовок h3. Жду ваших комментариев, до новых встреч !
dommol29.ru
