Как подключить к сайту экзотический шрифт кроссбраузерно?

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

Ну и поставил я над собой эксперимент, а чтобы было труднее соскочить, решил «лабораторную тетрадь» сделать публичной и разместил ее на одном заброшенном блоге.

Старый дизайн не соответствовал новой задумке, и я, не долго думая, взял более-менее понравившийся из общего репозитория WordPress’а.

Знаете в чем проблема некоторых готовых шаблонов, взятых оттуда? Проблема в корявой совместимости с кириллическими шрифтами. В моем случае, пострадали заголовки. Поскольку шрифт, на который ссылался CSS не содержал русских символов, оные брались из шрифта по умолчанию (то ли Sans, то ли Arial). В итоге, заголовки были ОГРОМНЫ и портили весь вид. Пришлось думать, чем заменить шрифт.

Способов это сделать — несколько.

Способ 1: Тупой

Сводится к тому, что вы находите в сети подходящий шрифт, устанавливаете к себе на комп, прописываете в CSS и видите свой сайт так, как было задумано.

Остальные продолжают видеть его в лучшем случае с дефолтными шрифтами, а в худшем еще и разъехавшимся.

Не делайте так!

Способ 2: Преобразуем дизайн под стандартный шрифт

Это самый идеальный вариант, но, к сожалению, он не всегда годится, поскольку иногда из за него теряется «изюминка» дизайна. Тем не менее, ВСЕГДА рассматривайте такой подход, поскольку, как бы вы не старались, может получиться, что клиентский компьютер все-равно задействует шрифт из тех, которые имеются в наличии.

Безопасные шрифты, которые есть почти во всех операционных системах, это: Verdana (идеален для текстов), Impact (иногда очень хорош в заголовках), Arial, Arial Black, Comic Sans MS (кака, которую очень любят новички), Courier New (подходит для примеров кода и форм), Georgia, Times New Roman, Trebuchet MS.

Способ 3: Картинка вместо текста

Вариант очень кроссбраузерный и подходит для оформления статичных элементов. Например — шапки сайта. Делаете прозрачную PNG с текстом с нужным шрифтом, обрабатываете как вам надо и вставляете на сайт, не забыв заполнить ALT. Или то же самое, но текст прилепляем на какой-нибудь фон и сохраняем в JPG.

Мне же, кроме шапки, нужно было изменить внешний вид заголовков постов и виджетов. Ну не делать же под каждую запись отдельную картинку с заголовком?

Хотя есть умельцы, которые герерируют картинки с текстом заголовков при помощи серверных скриптов, но это уже извращение.

Способ 4: Cufon

Существует такая javascript-библиотека, которая подключается к сайту вместе со вспомогательным javascript-аплетом, который содержит в себе все кривые, необходимые для рисования букв какого-либо шрифта средствами javascript. Подробнее смотрите тут http://habrahabr.ru/post/61033/

Эти аплеты можно создать из файла шрифта с помощью онлайн-генератора http://cufon.shoqolate.com/generate/

Так же, можно выбрать готовые аплеты здесь http://www.cufonfonts.com/ru

Самый простой способ, воспользоваться http://www.google.com/fonts Выбираете нужный шрифт из представленных и получаете готовый код, который нужно вставить на сайт (в head, и в файл стилей), после чего всё работает.

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

Способ 4: Подключить шрифт к сайту с помощью CSS

В интернете полно руководств на эту тему. Однако, перепробовав пятОк из них я пришел к плачевному результату. Мой TTF-шрифт нормально отображался только в IE. В остальных браузерах его беспощадно заменил Arial.

Признаюсь, я не фанат IE и считаю его браузером для скачивания браузеров. Не более! Так что, пришлось сделать небольшое усовершенствование.

Чтобы подключить к сайту шрифт с помощью CSS нам понадобится сам шрифт (файл) и онлайн конвертер http://onlinefontconverter.com/

1. Заходите на сайт конвертера, хватаете имеющийся у вас шрифт и тащите вот в такое окошко (оно обычно в правой колонке).

2. Скачиваете шрифт в 4-х вариантах: EOT, OTF, TTF и WOFF. Этого должно хватить. Браузер, в процессе рендеринга страницы, сам выберет и скачает тот, который ему удобнее.

3. Заливаете шрифты на сайт. Я создал для этого в корне сайта папку «f» и разместил их туда.

4. Подключаете подгрузку шрифта к сайту. Для этого в css-файл, или в соответствующие тэги стилей, вписываем вот этот код.

@font-face{
font-family: EtoMoiFont;
src: url(/f/myFont1.eot),
url(/f/myFont1.otf),
url(/f/myFont1.ttf),
url(/f/myFont1.woff);
}

font-family: EtoMoiFont; — говорит браузеру о том, как будет называться подгруженный шрифт. Название придумайте сами.

src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff); — указывает путь и имена файлов шрифтов.

Почему шрифты идут именно в этом порядке?

Первым, я поставил EOT. Этот формат используют старые версии IE.

Вторым — OTF. Это сжатый формат шрифтов, который, по идее, весит меньше.

Третьим — TTF. Его понимают практически все браузеры. Хотя, бывает по разному. Например в iOS он может не открыться.

Последним — WOFF. Это должно хорошо читаться на маках, но проверить еще не было времени.

5. Обозначаете в файле стилей, каким семейством шрифтов выводить заголовки (в нашем случае заголовки h2).

h2{font-family: EtoMoiFont;}

Готово!

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

Вот, что получилось.

Минус метода в том, что настройки браузеров некоторых параноидальных пользователей могут запрещать загружать внешние шрифты, flash, javascript, картинки и пр. пр.

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

И еще! Тестируйте методы только на компьютерах, где шрифт, с которым собираетесь работать, не установлен. Иначе получится способ номер 1.

На этом всё. С вами был Доктор Лексиум.
До новых встреч.