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

Как изменить шрифт в шаблоне WordPressПриветствую Вас, друзья! На тему, о корректировке шаблона, я писал в уроке 74 «корректировка шаблона WordPress» и уроке 78 «Firebug - инструмент веб-мастера». Но там я не описывал, как изменить шрифт в шаблоне WordPress. В принципе, изменить шрифт можно не только в шаблоне WordPress, но и в любом другом.

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

Советую устанавливать те шрифты, которые поддерживаются популярными браузерами. Что можно изменить в шаблоне WordPress? Можно изменить шрифт заголовков H1…H6, основной текст шаблона, да и любой другой шрифт, который мы только захотим.

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

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

font-family: Arial, Helvetica, Sans-Serif;

Теперь в этой строке нужно дописать шрифт, который Вы хотите применить к шаблону WordPress по умолчанию. В моем случае, я дописал шрифт «Adventure». Этот шрифт не является безопасным, поэтому скорее всего я его позже сменю. Пока я изменил только шрифт заголовков. Вот так теперь выглядит строка в файле styles.css:

font-family: Adventure, Arial, Helvetica, Sans-Serif;

Я дописал шрифт «Adventure». Не советую удалять остальные шрифты в этой строке. Если зайти на мой блог через браузер Google Chrome, Mozilla или Опера, то шрифт «Adventure» виден, но, если зайти на блог с мобильного телефона, этот шрифт уже не отображается, но отображается следующий шрифт, который идет за «Adventure» - «Arial».

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


______________________________
К уроку 133. Правильная перелинковка страниц сайта

31 Comments

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

  2. Юрий, извините за дилетанский вопрос: в какой программе вы меняли стили CSS? Просто в Total Commander и Filiezilla нет указания очередности строк…Спасибо

    Дмитрий
    • Дмитрий, для редактирования файлов PHP или CSS, лучше пользоваться редактором “Notepad++”. На официальном сайте его можно скачать http://notepad-plus-plus.org/

  3. Спасибо!!! 🙂

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

    • Алевтина, Вам надо увеличить немного шрифт font-size, и добавить величину отступа с помощью margin-bottoм.

  5. О! У меня получилось – текст увеличился, ура!

  6. Я в постах, на страницах и на главной изменил шрифт в файле стилей, а в карте сайта остался прежний. Как в карте сайта изменить?

    • Если “карта сайта” создана с помощью плагина, тогда возможно надо искать стили в самом плагине

      • Да, с помощью плагина. Хорошо попробую поискать. Но по идеи ведь шрифт должен быть как на на обычных страницах. Я пробовал обновлять карту блога, всё равно ничего не получается.

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

        • Я только что ради интереса сравнил шрифт на обычных страницах сайта с картой, так шрифт ведь одинаковый вроде. Я отличий не увидел

          • Юрий, отличие есть. Раньше везде был размер 14, а теперь я сделал 16. Только одна карта осталась. Ну да ладно, пока не буду по этому поводу париться. Спасибо за ответы.

            • Александр, в 798 строке style.css меняется размер шрифта карты. Установлен размер 14 px, а в постах 16 px. Я думал сам шрифт отличается чем-то, а не размер.

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

            • Александр, плагин кэширования не надо отключать. Достаточно кэш почистить и все.

  7. Здравствуйте, Юрий! Спасибо за статью.
    У меня в статьях внутри сайта слишком мелкий и жирный текст – как можно отредактировать шрифт, не нанося изменении для главной страницы сайта, иначе все сдвигается с места. работаю на WP. Спасибо!

    • Виктория, приветствую Вас! В стилях на Вашем сайте задан параметр font-weight: bold; для этого шрифта, а нужно задать font-weight: normal; чтобы шрифт не выделялся жирным.

  8. Здравствуйте, Юрий! Отличная статья, спасибо. Мой сайт на Modx не могу найти где находятся font-size и font-family, чтобы увеличить шрифт и изменить шрифт на другой по стилю. Буду благодарна за помощь!

    Nastya
    • Здравствуйте! Разницы нет, на каком движке Ваш сайт. Вы адрес сайта напишите, и я посмотрю, где можно изменить шрифт

      • www.tapanar.by

        Nastya
        • font-family находится в файле global.css в 9 строке, а вот font-size я не нашел в каком файле. Не получается определить, но размер текста в браузере получается менять.

  9. Спасибо за помощь огромное!!!! Хорошего Вам дням!

    Nastya
  10. Благодарю за дельный совет. Очень помог. Еще раз спасибо.

  11. Юрий, добрый день. Подскажите, пожалуйста, как изменить шрифт рубрик. Слово само Рубрика я нашла где изменить в css, а размер шрифтов в рубриках не нашла. Сайт element43.ru. Тема дурная какая-то, в обычных сразу все нахожу и меняю, а тут засада.

    Татьяна
    • Приветствую, Татьяна. Вам нужно в 252 строке добавить параметр, font-size: 18px; чтобы получилось так:

      padding-left:20px;
      font-size: 18px;
      text-decoration:none;
      background:url(images/content-list.png) left no-repeat;
      color:#fff;

      Если 18 мало, подставьте большее значение шрифта. А вот путь к самому файлу css, где менять надо шрифт: http://element43.ru/wp-content/themes/woodang/style.css?ver=4.6.1

      Скриншот, можно посмотреть по ссылке http://screenshot.ru/upload/images/2016/09/13/2016-09-13_12301294363.jpg

  12. Юрий, здравствуйте! Подскажите, пожалуйста, а как увеличить размер шрифта в мобильной версии? css поправили, на компе увеличился, а в телефоне остался мелкий. Спасибо большое за помощь заранее!

    • Приветствую Вас, Юлия! Дело в том, что под мобильный сайт создается отдельный шаблон, поэтому все изменения нужно делать уже в нем

      • Здравствуйте, Юрий! Спасибо за ответ. А где могут лежать файлы этого отдельного шаблона в теме, адаптированной по умолчанию?

        • Если Вы настраивали мобильную версию сайта с помощью плагина «WPtouch Mobile Plugin», тогда шаблон ищите в папке «themes» по следующему пути site.ru/wp-content/plugins/wptouch/themes.

Leave a Reply

Яндекс.Метрика