Как прикрутить шрифт на сайт при помощи CSS

Главные вкладки

Аватар пользователя Vovovich Vovovich 7 ноября 2010 в 1:45

Иногда возникает необходимость использования на сайте нестандартных шрифтов. В данной статье будет рассказано о простом способе «прикрутить» шрифт на ваш сайт средствами CSS. Рассказывать буду на примере Franklin Gothic Medium Cond.
Решение подходит для: Opera, Firefox и IE.

Итак, приступим.

  1. Для начала нам понадобится файл самого шрифта, в формате TTF (TrueType Font). Для этого можно воспользоваться этим сервисом. На нем вы найдете какой угодно шрифт и сразу проверите его в действии.
  2. После закачки необходимо .ttf сконвертировать в .eot (Embedded OpenType). Заходим сюда. Нашжав «Обзор» выбираем .ttf, после чего жмем кнопку «Convert TTF to EOF!». Сохраняем на диске.
  3. Создаем папку fonts в папке с нашим шаблоном и копируем туда Franklin.ttf и Franklin.eof. Кстати, файлы со шрифтами можете озаглавить как угодно.
  4. Далее необходимо добавить следующие строки в css файл нашего шаблона, причем выше стилей, к которым нужно будет привязать шрифт. Также хочу заметить порядок подключения файлов: сначала .eot, а потом .ttf.
    [user=font]font[/user]-face {
      font-family: "Franklin Gothic Medium Cond";
      src: url("../fonts/Franklin.eot");
    }

    [user=font]font[/user]-face {
      font-family: "Franklin Gothic Medium Cond";
      src: url("../fonts/Franklin.ttf");
    }

    Спросите почему подключаем два файла? Дело в том, что .ttf поддерживается Мозилой и Оперой, а .eof необходим для IE. Исп. пост glu2006 в теме [#38487]Typeface - любой шрифт на сайте[/#].

  5. В том же файле со стилями мы теперь можем указывать в классах наш шрифт:
    .content p {
            font-family: "Franklin Gothic Medium Cond";
    }

Все готово! Жмем F5 и наслаждаемся новым шрифтом на нашем сайте из Оперы, Мозилы и IE.

Пример использования этого решения можете увидеть здесь. Левое меню и заголовок h2 выполнены с использованием нашего нестандартного шрифта.

Комментарии

Аватар пользователя Eugeny Eugeny 7 ноября 2010 в 10:27

"DennisVV" wrote:
Решение подходит для: Opera, Firefox и IE.

Какие версии IE Поддерживает ? в хроме и сафари тоже работает?

Аватар пользователя Vovovich Vovovich 7 ноября 2010 в 14:37

"Eugeny" wrote:
в хроме и сафари тоже работает?

В хроме работает, в сафари не проверял. В IE 7 точно работает)).

"q2_faith" wrote:
а если у клиента отключена загрузка шрифтов?)

Ну тогда будет стандартный шрифт.

q2_faith, спасибо за сервис!!

Аватар пользователя v1adimir@drupal.org v1adimir@drupal.org 8 ноября 2010 в 9:24

G.A. Vinogradov wrote:
Выглядит как полное говно. Не используйте кастомные шрифты.

кривая отрисовка может быть связана с данной конкретной гарнитурой?

Аватар пользователя G.A. Vinogradov G.A. Vinogradov 8 ноября 2010 в 10:05

<a href="mailto:v1adimir@drupal.org">v1adimir@drupal.org</a> wrote:
G.A. Vinogradov wrote:
Выглядит как полное говно. Не используйте кастомные шрифты.

кривая отрисовка может быть связана с данной конкретной гарнитурой?

Угу, именно так, но вот ведь в чем проблема: таких гарнитур - абсолютное большинство.

Кастомные шрифты до нынешнего времени использовались только для производства печатной продукции. Они не использовались для отображения информации на дисплее (исключения лишь подтверждают правило). Поэтому они хорошо смотрятся, скажем в печати на 300dpi, но плохо при отображении на мониторе в ~72dpi. В то же время стандартные шрифты вкупе с механизмом растеризации шрифта выдают отличную, читаемую картинку - они изначально проектировались для этого.

Немного другая ситуация с Макинтошами, но чего нет, того нет - не могу сказать, хорошо ли там смотрятся кастомные шрифты. Скорее всего плохо, но гораздо лучше, чем в Винде.

Аватар пользователя G.A. Vinogradov G.A. Vinogradov 8 ноября 2010 в 10:35

<a href="mailto:v1adimir@drupal.org">v1adimir@drupal.org</a> wrote:
так может нужно шрифты брать не косячные? и радоваться правильной реализации и кравивому тексту. )

Если вы знаете такие шрифты, да еще и русские - давайте ссылки!

Аватар пользователя Vovovich Vovovich 10 ноября 2010 в 14:56

"kodo" wrote:
Ну есть еще способ - Cufon

Мне таким способом верстальщик и прикрутил шрифт...но потом, когда нужно было еще скриптов понаставить, в IE стали происходить глюки. Да, способ классный, плюс "рваность" шрифтов сглаживается.

Аватар пользователя kodo kodo 10 ноября 2010 в 15:03

"Vovovich" wrote:
когда нужно было еще скриптов понаставить

да скриптов у меня вроде тоже хватает, пока вроде все Ок.

Аватар пользователя Vovovich Vovovich 10 ноября 2010 в 15:15

"kodo" wrote:
да скриптов у меня вроде тоже хватает, пока вроде все Ок.

В частности, глюки происходили при плавном разворачивании меню (там еще функция slideToggle задействована). Когда отключил Cufon - глючить перестало, но и шрифт сделалася по умолчанию. Возможно что-то не так делал, потому и глючил IE. Может когда врея появится, вернусь к этому вопросу, ведь хочется покрасивее сделать.

Аватар пользователя denis_imo denis_imo 18 ноября 2010 в 19:01

opera10 не хочет нормально работать со сторонними шрифтами. Тестировал, Opera подгружает ttf шрифт если файл открыт из локальной папки. Если страница загружается с сервера, то opera шрифт не грузит. Однако на офф. блоге Opera читал что она дружит со шрифтами otf, там даже примеры были. Со сторонними шрифтами есть ещё несколько тонких моментов.
В Safari наблюдал глюки с жирностью сторонних шрифтов, прямо до безобразия жирные. В ff пока шрифт не загружен, он отображает другим доступным шрифтом. Как только шрифт подгружается, он меняется на странице. Очень неприятный эффект.
Так что лучше не использовать сторонние шрифты. Ничего полезного выявленного не было.

Аватар пользователя demart demart 2 марта 2011 в 19:54

Поставил ubuntu шрифт, сижу на винде XP, сглаживагие отключено, шрифты выглядят херово, есть ли возможность сглаживать шрифт на сервере?