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

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

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-файл.

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