Веб-шрифты. Инструкция.

12
978

Сегодня я расскажу как установить уникальные шрифты на блог.

Выбирая шрифт для сайта, если вообще такой выбор стоит, заключается в том, что в первую очередь он должен выполнять первоочередные для шрифта задачи. Шрифт должен быть таким – каким его удобно читать. На этом все его функции заканчиваются, красота, цвет, наклон – всё это второстепенно. Вообще можно поставить абсолютно любой экзотический шрифт, и сидеть им любоваться, в одиночку ;).


Почему в одиночку ? Да потому — что, если в системе посетителя данного шрифта нет, он и не увидит всю эту красоту. И в лучшем случае увидит стандартные буковки. Хотя особо он и не расстроится, ведь он даже не подумает о том что у Вас стоит нереально креативный шрифт ^_^ Поэтому выбирают тот шрифт, который вероятней всего установлен в системах посетителей.

Если задаться поиском с целью уникализировать шрифты у себя на сайте, то вы обнаружите что решения существуют и немало.  Cufón, sIFR, @font-family , также используют Javascript и вероятно ещё несколько способов которые я в поиске не увидел.

Google Font API

Самое элегантное решение на данный момент.

Данный способ на фоне “конкурентов” заметно отличается. Простота установки и никаких проблем с поисковиками. “Машина” Google обладает достаточно серьёзной мощностью, из чего следует отсутствие проблем с загрузкой шрифтов для посетителей. Причём если посетитель уже бывал у вас на ресурсе, то при следующем посещении шрифты будут подгружаться из кэша.

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

Первый шаг – ознакомление и выбор шрифта.

В первую очередь нужно посетить сам сервис  Google Font API. И выбираем вкладку Cyrillic, они-же кириллические шрифты, тобишь наши.

Google Font API

Выбор пока не очень богат, но думаю это дело времени.

Google Font API

Выбираем понравившийся шрифт и попадаем собственно к настройке визуального вида и получения готового кода.

Google Font API

Установка на сайт для WordPress.

Первую часть кода, (картинки кликабельны) нужно поместить в между тегами <head> </head>.

В wordpress это файл header.php. Подробнее о файловой системе wordpress можете ознакомиться здесь.

У меня эта строчка выглядит так:

<link  href="http://fonts.googleapis.com/css?family=Lobster:regular&subset=cyrillic,latin" rel="stylesheet" type="text/css" >

Это важно –> Каким-бы не был красивым и чудным выбранный шрифт, необходимо помнить,  что прежде всего он должен быть удобным для чтения.

Поэтому лучшим вариантом будет закрепить выбранный шрифт только за заголовками статей.

Для достижение этой цели — нужно скопировать код который находиться внутри body { скопировать_только этот_код }.

Открыть style.css найти заданное стилевое решение для заголовков h2 и заменить кодом который нам предоставил Google Font API.

В моём style.css это выглядит следующим образом:

[codesyntax lang="php"]
h2 {
font-family : 'Lobster', serif;
font-size : 34px;
font-style : normal;
font-weight : 400;
text-shadow : #aaa 2px 2px 2px;
text-decoration : none;
text-transform : none;
letter-spacing : 0;
word-spacing : 0;
line-height : 1.2;
}
h2 a {
font-family : 'Lobster', serif;
font-size : 34px;
font-style : normal;
font-weight : 400;
text-shadow : #aaa 2px 2px 2px;
text-decoration : none;
text-transform : none;
letter-spacing : 0;
word-spacing : 0;
line-height : 1.2;
}

[/codesyntax]

Сохраняем результат.

Всё, можно перезагружать страницу и любоваться результатом Улыбка

Если вы хотите, прежде чем ставить шрифты, сначала посмотреть как будет смотреться ваш блог/сайт с определённым шрифтом, можно воспользоваться расширением Google Font Previewer для браузера Chrome.

А как вы относитесь к подобным решениям ? ^_^

Спасибо за внимание. С уважением OlegS9.

12 КОММЕНТАРИИ

  1. Как такие шрифты установить на сайт на «народ.ру»? было бы очень желательно. Стандартные шрифты в заголовках совсем не смотрятся.

  2. Использование нестандартных шрифтов приветствуется, только трабла — сильно увеличивается время загрузки сайта, ибо подгружаются эти самые шрифты. Поэтому рекомендуется использовать стандартные. Представь, что с мобилки залазит чувак на сайт, а там подгружается файл на 500 Кб. А у него инет тормознутый… просто уйдет, подумает, что сайт недоступен.

    • отвечаю с андроида =) особо разницы не ощущаю с тем что было раньше. Хотя не могу сказать что Вы не правы. Тут каждый сам решает.

  3. Сделал сайтик с кириллическими шрифтами. Пока чуть больше сотни.
    Имеется более 700 русских шрифтов. Постепенно выложу все. Принцип как на гугл фонтс. Буду рад советам и комментам.

ОСТАВЬТЕ ОТВЕТ