Кроссбраузерное добавление стороннего шрифта на сайт

Кроссбраузерное добавление стороннего шрифта на сайт

Я когда-то давно писал на этом блоге как добавить в CSS файл подключение стороннего OTF-шрифта на сайт. Тогда это решение мне казалось идеальным, но как оказалось не все браузеры способны его понимать. Конечно-же технологии идут вперед и через несколько лет в WEB-технологиях не будут использоваться TTF-шрифты, но мы живем сейчас и сайты нужно делать именно сегодня.

Поэтому мне пришлось искать более элегантное решение, которое было бы действительно кроссбраузерным и работало везде, начиная от новой версии Google Chrome и заканчивая старым Internet Explorer 6 версии.

Небольшое отступление

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

  1. Увеличение размера (в килобайтах) страницы. Это стоит понимать, так как несколько красивых, русскоязычных шрифтов, подключенных в CSS-файле, могут напрочь отбить охоту очередному посетителю вашего сайта. В погоне за красивостями многие забывают, что сайт – это информационный ресурс, на который люди приходят чаще всего за информацией (есть сайты, которые сделаны не для этого, но сейчас не о них) и если у Вас не узкоспециализированный, уникальный сайт (этакий самородок Интернета), а один из миллионов сайтов, который пытается выбить себе место под солнцем.
  2. По возможности не используйте сторонние шрифты. Именно такая мысль вытекает из вышесказанного. Есть очень много хороших шрифтов, которые можно использовать на своем сайте без каких-либо дополнительных проблем. Если Вам нужно вывести несколько слов или статичных заголовков у себя на сайте, то подключать ради этого “чужой” шрифт – это не есть хорошо. Реализовать подобное будет проще использую в качестве заголовков графику.
  3. Используйте только один сторонний шрифт. Для того, чтобы сделать красивый сайт, не стоит пытаться добавлять на него сразу все найденные шрифты, которые Вам понравились. Чаще всего для выразительности достаточно одного единственного, который подчеркнет некоторые моменты на вашем сайте.
  4. В каждой операционной системе шрифт сглаживается по-разному. Как не прискорбно, но некоторые “чужие” операционной системе шрифты, могут просто отвратительно выглядеть, без малейшего намека на сглаживание. Особенно этим грешит операционная система Windows. Если свои “родные” шрифты Windows сглаживает нормально, то со сторонними у этой ОС очень большие проблемы. Поэтому, перед тем, как окончательно определится с шрифтами, стоит посмотреть на них в разных операционных системах.

Вот 4 правила, которые стоит понимать, перед тем как подключить Ваш шрифт. Если Вы все равно хотите подключить на своем сайте сторонние шрифты, которые у посетителя вашего сайта нет, то делайте это правильно.

Подключаем шрифт правильно

В любой умной книжке по тайм-менеджменту пишут, что если не можете или не хотите сделать все самостоятельно, то попросите кого-нибудь другого это сделать. Чтобы самостоятельно не делать довольно утомительную и нудную работу, проще всего воспользоваться специализированным Web-сервисом, который из загруженного вами шрифта сделает все необходимые форматы шрифтов и покажет правильный, а самое главное валидный, CSS-код для правильного его добавления на свой сайт.

Сервис этот буржуйский и называется он fontsquirrel.com:

Кроссбраузерное добавление стороннего шрифта на сайт

Несмотря на то, что сайт на английском языке, работать с ним очень просто:

  1. загружаем шрифт, кликая на Add Fonts;
  2. изменяем если требуется режим формирования с OPTIMAL на EXPERT, но меня устраивает все и так;
  3. ставим галку возле красной надписи и давим Download Your Kit и на этом все.

В загруженном архиве есть файл stylesheet.css, в котором присутствует CSS-код. Его необходимо добавить в CSS-файл вашего сайта.

@font-face {
font-family: 'FlowerNormal';
src: url('flower-webfont.eot');
src: url('flower-webfont.eot?#iefix') format('embedded-opentype'),
url('flower-webfont.woff') format('woff'),
url('flower-webfont.ttf') format('truetype'),
url('flower-webfont.svg#FlowerNormal') format('svg');
font-weight: normal;
font-style: normal;
}

где flower – это имя шрифта, которое было изначально;
FlowerNormal – это имя шрифта, которое можно использовать в дальнейшем при разработке сайта.

Все файлы, которые присутствуют в архиве и на которые есть ссылки выше в html-коде, должны быть помещены в туже директорию, где находится ваш CSS-файл.

На этом вроде все.

P.S. Для того, чтобы продуктивность нашей с вами работы, как вебмастеров, была как всегда на высоте, необходимо создать комфортную обстановку вокруг своего рабочего места. Первым делом нужно купить светильник, который будет полностью удовлетворять нас в качестве излучателя света. Хоть и работа вебмастера – это 90% времени работы за компьютером, но освещенность в комнате должна быть достаточно высокой. Забота о личном комфорте и здоровье – это первоочередная задача каждого вебмастера.

Комментарии:

  1. myr4ik07 опубликовал комментарий 20 Ноябрь 2011, 21:44 #

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

    | Ответить
    • Admin опубликовал комментарий 21 Ноябрь 2011, 05:47 #

      Спасибо.

      | Ответить
  2. denis опубликовал комментарий 18 Декабрь 2011, 00:10 #

    у меня почему то на выходе файл stylesheet.css пустой получается, подскажите в чем дело?

    | Ответить
    • Admin опубликовал комментарий 20 Декабрь 2011, 17:43 #

      denis: у меня почему то на выходе файл stylesheet.css пустой получается, подскажите в чем дело?

      Тут я не могу помочь. У меня все нормально получается. Скиньте мне шрифт. Могу попробовать

      | Ответить
  3. sam опубликовал комментарий 31 Август 2012, 13:56 #

    спасибо. помогло. пиши еще. нормальная инструкция

    | Ответить
  4. Евгения опубликовал комментарий 23 Октябрь 2013, 21:38 #

    Доброе время суток!Подскажите пожалуйста начинающему блогеру,что случилось с моим шрифтом на сайте.Был нормального размера (в сайт баре исходный размер букв остался),а в статьях стал меленький.
    Спасибо!

    | Ответить
Имя
e-mail
Сайт
Текст комментария: