Приветствую Вас, друзья! На тему, о корректировке шаблона, я писал в уроке 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. Правильная перелинковка страниц сайта
Софья, конечно можно менять шрифты и в редакторе темы, это кому как удобно. Но на Вашем сайте вроде нормальный размер шрифта
Я не могу увеличить размер шрифта Внутри статьи. В редакторе админ панели шрифт и размер мне нравится — там крупнее, а перехожу на сайт — мелкий. Можно менять стили в редакторе темы, без залезания в файлы на хостинге? Я меняю в Файлах CSS размер шришта и название шрифта, но на сайте изменений не вижу. Кеш браузера чищу.
Антон, я вижу, что на Вашем сайте заголовки отображаются нормально. Помощь больше не нужна?
Юрий, подскажите, пожалуйста, неожиданно слетели шрифты у всех заголовков! Хотелось бы в самих статьях увеличить величину заголовков, а найти где не могу! Подскажите, плиз…
Да не то, чтобы тема не доделана, а возможно есть два, или более файлов css, и менять размер шрифта нужно в другом файле. У меня, например, этот шаблон, имеет наверное файлов 10 CSS. Посмотрите внимательно. Потому что все должно работать
Скажите, а если в файле style.css есть только одна строка со словами font-size и при изменении с 14 px, например, на 18 px с размером шрифта не происходит ничего после обновления файла, но я уверен, что менять надо шрифт в другом блоке. В блоке типа content, body и т.п. Так вот, там всего пара тройка строк и изменить шрифт вообще нельзя, нету нужного font-size. Как быть? Наверно тема недоделанная. Может самому дописать. Скажите, пожалуйста как, если знаете.
Юрий, спасибо большое за помощь!
Если Вы настраивали мобильную версию сайта с помощью плагина «WPtouch Mobile Plugin», тогда шаблон ищите в папке «themes» по следующему пути site.ru/wp-content/plugins/wptouch/themes.
Здравствуйте, Юрий! Спасибо за ответ. А где могут лежать файлы этого отдельного шаблона в теме, адаптированной по умолчанию?
Приветствую Вас, Юлия! Дело в том, что под мобильный сайт создается отдельный шаблон, поэтому все изменения нужно делать уже в нем
Юрий, здравствуйте! Подскажите, пожалуйста, а как увеличить размер шрифта в мобильной версии? css поправили, на компе увеличился, а в телефоне остался мелкий. Спасибо большое за помощь заранее!
Приветствую, Татьяна. Вам нужно в 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
Юрий, добрый день. Подскажите, пожалуйста, как изменить шрифт рубрик. Слово само Рубрика я нашла где изменить в css, а размер шрифтов в рубриках не нашла. Сайт element43.ru. Тема дурная какая-то, в обычных сразу все нахожу и меняю, а тут засада.
Благодарю за дельный совет. Очень помог. Еще раз спасибо.
Спасибо за помощь огромное!!!! Хорошего Вам дням!
font-family находится в файле global.css в 9 строке, а вот font-size я не нашел в каком файле. Не получается определить, но размер текста в браузере получается менять.
http://www.tapanar.by
Здравствуйте! Разницы нет, на каком движке Ваш сайт. Вы адрес сайта напишите, и я посмотрю, где можно изменить шрифт
Здравствуйте, Юрий! Отличная статья, спасибо. Мой сайт на Modx не могу найти где находятся font-size и font-family, чтобы увеличить шрифт и изменить шрифт на другой по стилю. Буду благодарна за помощь!
Виктория, приветствую Вас! В стилях на Вашем сайте задан параметр font-weight: bold; для этого шрифта, а нужно задать font-weight: normal; чтобы шрифт не выделялся жирным.
Здравствуйте, Юрий! Спасибо за статью.
У меня в статьях внутри сайта слишком мелкий и жирный текст — как можно отредактировать шрифт, не нанося изменении для главной страницы сайта, иначе все сдвигается с места. работаю на WP. Спасибо!
Александр, плагин кэширования не надо отключать. Достаточно кэш почистить и все.
Спасибо Юрий, помогло. Я уже когда то вроде бы пробовал эту строчку, но возможно плагин кэширования нужно было отключать.
Александр, в 798 строке style.css меняется размер шрифта карты. Установлен размер 14 px, а в постах 16 px. Я думал сам шрифт отличается чем-то, а не размер.
Юрий, отличие есть. Раньше везде был размер 14, а теперь я сделал 16. Только одна карта осталась. Ну да ладно, пока не буду по этому поводу париться. Спасибо за ответы.
Я только что ради интереса сравнил шрифт на обычных страницах сайта с картой, так шрифт ведь одинаковый вроде. Я отличий не увидел
Нужно просто зайти в папку плагина, и посмотреть какие там файлы есть. В первую очередь нужно искать файл стилей. И вовсе не обязательно шрифт карты сайта должен быть такой же, как на всем сайте, потому что за карту сайта отвечает полностью плагин.
Да, с помощью плагина. Хорошо попробую поискать. Но по идеи ведь шрифт должен быть как на на обычных страницах. Я пробовал обновлять карту блога, всё равно ничего не получается.
Если «карта сайта» создана с помощью плагина, тогда возможно надо искать стили в самом плагине
Я в постах, на страницах и на главной изменил шрифт в файле стилей, а в карте сайта остался прежний. Как в карте сайта изменить?
О! У меня получилось — текст увеличился, ура!
Алевтина, Вам надо увеличить немного шрифт font-size, и добавить величину отступа с помощью margin-bottoм.
Для меня это актуальный вопрос, шрифт на страницах сайта мелкий и расстояние между строками маленькое. Как моменять заголовки и в тексте я поняла, а как изменить расстояние между строк. На мобильниках читать такой текст как у меня очень плохо.
Спасибо!!! 🙂
Дмитрий, для редактирования файлов PHP или CSS, лучше пользоваться редактором «Notepad++». На официальном сайте его можно скачать http://notepad-plus-plus.org/
Юрий, извините за дилетанский вопрос: в какой программе вы меняли стили CSS? Просто в Total Commander и Filiezilla нет указания очередности строк…Спасибо
Полезно знать, для меня это новое, так как не знала, что и шрифты можно поменять. Меня пока устраивают мои шрифты, но в будущем возможно захочется поменять