Меню

Как Подключить Шрифты Для Сайта?

Всем нам иногда хочется разнообразия, особенно, если речь идет о собственном веб-сайте. Один из замечательных способов внести свежую струю в оформление блога — использовать какие-нибудь нестандартный красивый шрифт, например, для заголовков. Но как подключить шрифты для сайта? Первое решение, которое напрашивается — скачать их для сайта из какого-нибудь файлового хранилища, импортировать их в свой 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».

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

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

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

  • Сначала поставим галочку на Cyrillic Extended
  • Далее вставим предложенный код в файл шаблона header.php перед закрывающим тегом «/head»
  • Следующий код используем для класса требуемого блока, то есть в моем случае для шрифта заголовка первого уровня на сайте я в файле style.css напишу следующее:
    h1 {font-family: 'Lobster', cursive;}
  • И наконец, можно любоваться результатом использования нестандартного шрифта на сайте.

Если ничего не произошло, то внимательно посмотрите в шаблоне файл 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;}

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

Комментарии 1

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *