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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оцените статью