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

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

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

Старый дизайн не соответствовал новой задумке, и я, не долго думая, взял более-менее понравившийся из общего репозитория 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» и разместил их туда.

Update 16.02.2015: На данный момент onlinefontconverter.com переделали и ни один из предложенных шрифтов он не сконвертировал((

Пришлось воспользоваться сайтом font2web.com. Этот отдает все необходимые шрифты сразу пачкой в одном архиве. Удобно!

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;}

Готово!

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

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

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

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

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

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

6 комментариев на «“Как подключить к сайту экзотический шрифт кроссбраузерно?”»

  1. Мне больше всего понравилось, как ты сказал- IE — браузер для скачивания браузеров)

  2. Трудно сказать, не силён в шрифтах. Возможно ячейки для кириллицы расположены в нестандартных местах или кодировка не подходящая? Рекомендую найти какой-нибудь font-editor, загрузить в него ваш шрифт и ариал, потом сравнить. Возможно даже получится поправить вручную.

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

  3. Кажется кое-что уже нарыл. После пропуска через конвертеры, мой шрифт теряет поддержку кириллицы. Почему это происходит?

  4. ЗДравствуйте! После недели мучений, с вашей инструкцией всё сделал в 5 минут. Спасибо огромное!
    Но не получилось только одно, ОЧЕНЬ ПРОШУ ПОМОГИТЕ, уже сил нет и не знаю у кого спрашивать.
    Добавил шрифт как указано у вас. ОН ТОЧНО С ПОДДЕРЖКОЙ КИРИЛЛИЦЫ.
    Но когда прописываю его например для заголовков статей, то получаю нужный результат только лишь если надписи на ЛАТИНИЦЕ, а если КИРИЛЛИЧЕСКИЕ то они остаются Arial по умолчанию.
    Где копать????

  5. Тут нет никакого «или». font-family в обоих случаях используется для разных целей.

    В стилях для класса, тэга или id вы указываете названия (font-family) нужных вам шрифтов в порядке приоритета их использования.

    @font-face используете для указания браузеру рабочего названия шрифта (font-family) и откуда его грузить (url) если он отсутствует на локальной машине.

    Т.е. если вы упомянули название шрифта, а на локальной машине его нет, он берётся из @font-face.

    PS Параметры @font-face указывайте до того, как привязывать шрифт к тэгу, классу или id.

  6. Ништяк статья.
    В сочетании со статьёй на хабре и описанием правила в htmlbook у Мержевича я понял как это работает.
    Итересно вот что:
    Как лучше задавать подгрузку шрифта при его отсутствии на локальной машине?
    Прямо в правиле через ссылку local так:
    @font-face{
    font-family: Calibti2;
    src: local(Calibri.ttf),
    url(/fonts/Calibri.ttf);
    или в стилях, например так: font-family: Calibri, Calibri2, serif;

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

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