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

  Автор:
  7052
Как использовать нестандартные шрифты на блоге

Не секрет, что браузеры могут корректно отображать не все шрифты, которые существуют. Но иногда так хочется, чтобы например заголовки статей, выглядели как рукописные или более круглыми буквами и т.д. Просто прописать в стилях название шрифта, к сожалению не достаточно. Браузер не сможет отобразить, то что Вам хочется и переведет необычный шрифт в обычный Arial или Verdana, Tahoma и т.д.

Также нестандартный шрифт может понадобиться при переводе шаблона WordPress на русский язык. Так например, на днях настраивала блог, премиум шаблон Lifestyle студии http://StudioPress.com. В шаблоне используется нестандартный шрифт для заголовков и меню. Естественно в кирилице вся необычность и красота перестала отображаться и появился вместо этого стандартный шрифт Arial. Вид у шаблона сразу стал не тот. Исчезла изюминка, ради которой, может быть он и был выбран.

В общем долго не буду томить, расскажу как я решила этот вопрос.

1. Идем в сервис Google Fonts http://www.google.com/webfonts
2. Выберите из списка «Scripts» — «Cyrillyc»
3. Просмотрите образцы шрифтов и нажмите «Quick use» под шрифтом, который Вы хотите использовать на блоге

4. На следующей странице следуйте инструкции:

1. Выберите стиль шрифта


2. Поставьте галочку напротив «Cyrillic Extended (cyrillic-ext)»
3. Скопируйте ссылку и вставьте ее в шаблоне в файл header.php перед закрывающим тегом head>


4. Скопируйте стиль и вставьте его в файле шаблона style.css, например в стиль для тега h1

Например:

h1
{
font-family: 'Comfortaa', cursive;
font-size:24px;
}

Теперь все заголовки h1 будут отображаться шрифтом ‘Comfortaa’.

Как определить название стиля (class), который используется для заголовков статей в Вашем шаблоне?
1. Зайдите в редактор шаблона: «Внешний вид» — «Редактор»
2. Откройте файл index.php
3. Найдите в коде вывод заголовка. Может выглядеть так:

4. В Примере стиль для h1 называется «title»
5. Откройте файл style.css
6. Найдите в коде стиль h1.title, его и нужно редактировать для изменения шрифта

Конечно для кириллицы шрифтов гораздо меньше, чем для латиницы, но уже с этой технологией можно придать блогу необычную изюминку. Главное не переборщить. Текст статей лучше оставить стандартным — Arial или Verdana. А вот с заголовками статей, виджетов можно поиграться :)

А Вы хотели бы установить нестандартный шрифт для заголовков статей на своем блоге? Приглашаю к обсуждению :)

Если считаете, что статья полезная, не забудьте отправить ее друзьям в социальные сети.

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

   1 голос
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

Анфиса Бреус - разработчик сайтов на Wordpress с 2007 года. Создатель и разработчик универсального шаблона - конструктора "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов на WordPress. Основатель клуба "Мастер WordPress". Спикер. Путешественница.

Пошаговый План По Созданию Бизнес-Блога На WordPress
Оставьте свой комментарий:
27 комментариев
  1. Наталия Гущина

    Анфиса, спасибо огромное за такую нужную статью, как всегда очень доступно и понятно расписано

    И где вы все находите? :-)

  2. Виктор Белобородько

    Неотразимая рекомендация. Срочно внедрю на своем блоге.
    безграничная благодарность, Анфиса! Все сЛОЖНОЕ становится пРОСТым! ;-))

  3. Людмила Винокурова

    Спасибо, Анфиса, за статью, за такую нужную информацию. Я думаю это будет интересно как начинающим, так и тем, кто уже давно занимается блогами.

  4. Марина Лазарева

    Прикольно! Отличная возможность для украшения статей блога :) Мне нравится :)

  5. ZeroXor

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

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

  6. Лариса Марштупа

    Анфиса, спасибо за урок. Обязательно попробую. Видела Ваше интервью с Артемом Мельником — слушала, затаив дыхание.
    Две вещи особенно были созвучны:
    1. Следовать своим интересам — единственно верная дорога в жизни. Много лет я сомневалась, что мои интересы могут когда-нибудь соединиться с тем, что делаю ежедневно. Работа как-то была сама по себе, а интересы — сами по себе. Я очень люблю знания, хорошие книги, учиться, меняться и чувствовать себя все свободнее. И хотя мой сайт учебный и совершенно зеленый во всех смыслах), я чувствую себя счастливой, «работая» с ним. Нет больше никакого конфликта.
    2. Когда у меня не получалось изменить в ворпресс Home на Блог, я вспомнила Вас и что html — это не страшно. Открыла в консоли редактор, и додумалась как это исправить. Остановиться уже будет трудно. Спасибо!

  7. Алексей

    Спасибо за статью, надо будет попробовать у себя на блоге по экспериментировать со шрифтами.

  8. Ирина

    Здравствуйте , Анфиса!!! И спасибо за интересную статью. Как всегда нужный и полезный материал.
    Очень интересная идея для создании индивидуальности блога.Да можно попробовать использовать другой шрифт в названии блога, будет наверное здорово.
    К тому же интересно выделить иногда важную часть в тексте каким то не обычным шрифтом. Буду экспериментировать.
    Еще раз спасибо!!!

  9. Виталий

    Спасибо, Анфиса, не знал про такой способ =)Воспользуюсь вашим советом )

  10. Отличная новость и инструмент.
    БлагоДарю, Анфиса
    А если я выбираю несколько шрифтов?
    Все равно нужно по одному вставлять их?

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

  11. Игорь Власенко

    Спасибо огромное! Давно искал, как разнообразить свой блог шрифтами и тут вы. Очень кстати!

  12. Большое спасибо, Анфиса! Обязательно попробую на своём блоге! Как всегда всё чётко, ясно и понятно! Хороший способ выделиться из толпы, что очень не просто сейчас!

  13. Да Google сделал великолепный сервис, но малое количество шрифтов не дает развернуться на полную катушку :)

  14. А да еще хотел добавить, стили шрифта лучше задавать с помощью одного свойства font, по рекомендациям поисковых систем, это сокращает размер css файла(стилей сайта), но при этом не ухудшает читаемость.
    Для примера:
    h1{
    font: bold italic 24px ‘Comfortaa’, cursive;
    }
    Поддерживается всеми версиями СSS

  15. Ольга

    Здорово! Очень кстати. Как раз делаю сайт без картинки в шапке, потому что будет много фото, и надо оживить заголовок.

  16. Ольга Кузьминых

    Классно!!! Ну кто бы еще смог во всем этом разобраться? Спасибо, Анфиса огромное.

  17. Круто. Не любитель разнообразия шрифтов на сайте, но то, что такой метод есть — замечательно. Иногда очень даже может пригодиться.
    Спасибо, Анфиса!

  18. Анфиса, огромное спасибо за статью. Скоро начну эксперименты. Совершенно случайно нарвался на данную статью, что вдвойне приятно. Вы — молодечик.

  19. Ира

    у меня не ставится никак=(

  20. Елена

    Спасибо за полезную информацию! попробовала сменить шрифт у себя на сайте. Все получилось!

  21. Светлана Мамонтова

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

  22. Большое спасибо за полезный урок, Анфиса!
    Откровенно говоря, я побаиваюсь влезать в css, но по такой пошаговой инструкции рискну!

  23. Николай

    Анфиса, доброе время суток! У меня стоял вопрос о выборе шрифта для постов моего блога, но о выборе шрифта для заголовка вопрос как бы не актуален был. Иногда правда появлялось желание поменять шрифт, так как мне казался слишком обыденным. Спасибо за полезную информацию.

на Блоге
в Фейсбук
в Вконтакте