Как изменить стандартные шрифты для сайта?

Всем нам иногда хочется разнообразия. особенно, если речь идет о собственном веб-сайте. Один из замечательных способов внести свежую струю в оформление блога — использовать какие-нибудь нестандартный красивый шрифт, например, для заголовков. Но как это сделать? Первое решение, которое напрашивается — скачать шрифты для сайта из какого-нибудь файлового хранилища, импортировать их в свой Windows и использовать при рисовании изображения логотипа или надписей для графического оформления дизайна. Но если речь идет о заголовках статей, то сделать это не представляется возможным — в CMS они выводятся при помощи базы данных, а если вставлять эти картинки вручную, то для всех статей просто картинок не нарисовать, да и нехорошо это для SEO, так как заголовки должны быть текстовыми и оптимизированными под ключевые запросы, по которым будет продвигаться статья.

Шрифты для сайта?

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

h1 {font-family: arial, Helvetica, Verdana;}

Это как раз делается для того, чтобы если у читателя нет одного шрифта, то чтобы использовался другой, следующий за ним по списку. Если я сюда еще пропишу, например «Normal 400», то он будет отображаться только у тех, у кого он есть в папке Fonts в Виндоусе, а таких будет около 0.5% ваших посетителей. У большинства же заголовки будут отображаться шрифтом «Arial».

А теперь предлагаю решение этой проблемы. Оно похоже на то, как на большинстве сайтов используется подключение библиотеки jQuery — со стороннего сервиса Google. И для шрифтов для сайта у Гугла тоже есть свой сервис — Google Fonts. Заходим по ссылке, выбираем раздел с кириллическими шрифтами и ищем тот, который нам больше всего подойдет.

google fonts

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

Стили шрифтов

После того, как определились с выбором кликаем по ссылке «Quick Use».

Выбрать шрифт для сайта





И в новом окне используем ту информацию, которую сгенерировал Гугл.

Как изменить шрифт на сайте

1. Сначала поставим галочку на Cyrillic Extended
2. Далее вставим предложенный код в файл шаблона header.php перед закрывающим тегом «/head»
3. Следующий код используем для класса требуемого блока, то есть в моем случае для шрифта заголовка первого уровня на сайте я в файле style.css напишу следующее:

h1 {font-family: 'Lobster', cursive;}

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

Если ничего не произошло, то внимательно посмотрите в шаблоне файл single.php, отвечающий за >>одиночные записи. Вывод заголовка в классических шаблонах происходит в коде

<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

Если у тега «h1» имеется какой-то класс, например так:

<h1 class="page_title">

то ищем в файле style.css стиль для этого класса и прописываем наш код шрифта в него:

h1.page_title {font-family: 'Lobster', cursive;}

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

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Комментариев: 4

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

  • Здравствуйте, Александр, а также и посетители. Как раз искал подобный материал, но немного другого содержания. Разъясните пожалуйста, как и где изменить шрифт для поста. На моем шаблоне слишком мелкий шрифт, хочу заменить на более крупный. Спасибо.

    • Все правится в файле style.css, если это стандартный шаблон. Если нестандартный, то в каком-то еще файле CSS, который присутствует в шаблоне

  • С этого года начала вести свой блог на шаблоне WP. И всё бы ничего, но шрифт, на мой взгляд, мелковат, а если попробовать сделать список в тексте или вставить блок (short коды-то есть), то он и вовсе становится мелким, частым и абсолютно не читаемым, поэтому приходится отказываться от возможностей, которые предоставляет имеющийся шаблон. Попробую последовать Вашим рекомендациям. Надеюсь, получится.

Добавить комментарий