Programmer Weekdays

Чуть раньше я рассказывал о использовании сторонних шрифтов на вашем сайте при помощи аплета Cufon. Но вот новые свойства стали поддерживать большинство браузеров и наконец то можно спокойно использовать @font-face. К сожалению и с ним не все так хорошо как хотелось бы, например для разных браузеров нужны разные расширения шрифтов и ttf не везде подходит, но об этом позже, а сейчас…

По данным статистики на данный момент минимум 92% браузеров полноценно поддерживают @font-face. На первый взгляд все просто, вызываем шрифт прямо в CSS и выбираем его в классе:

// Объявляем шрифт
@font-face {
    font-family: 'Имя шрифта';
    src: url('путь/до/шрифта');
}

// Применяем шрифт
.class {
    font-family: 'Имя шрифта', Arial;
}

Здесь в src: url указывается путь до файла со шрифтом, в src: local — название шрифта на локальной машине на тот случай, если у юзера этот шрифт уже есть. Но дальше не все так просто, разные браузеры используют разные расширения шрифтов.

Здесь в src: url указывается путь до файла со шрифтом, в src: local — название шрифта на локальной машине на тот случай, если у юзера этот шрифт уже есть. Но дальше не все так просто, разные браузеры используют разные расширения шрифтов.

Форматы шрифтов

Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:Internet Explorer (все версии) — EOT;Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);Opera (начиная с 10) — TTF/OTF;Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);Safari (начиная с 3.2) — TTF/OTF.

Кросс-браузерность

Для лентяев есть очень хороший сервис — FontsQuirrel. Который позволяет сэкономить куче времени на создании файлов с шрифтов. Он позволяет загрузить свой шрифт и получить его в архиве в разных расширениях.

Порядок действий:
1. Загружаем свой шрифт.
2. Выбираем Expert.
3. В пункте Subsetting выбираем «No Subsetting» иначе у нас не будут поддерживаться русские буквы.
4. Соглашаемся и скачиваем архив.
5. Из архива вытаскиваем наши шрифты.

Правильное подключение

@font-face {
    font-family: 'Имя шрифта';
    src: url('Имя шрифта.eot');
    src: local('☺'),
         url('Имя шрифта.woff') format('woff'),
         url('Имя шрифта.ttf') format('truetype'),
         url('Имя шрифта.svg#webfontE40g3tc3') format('svg');
    font-weight: normal;
    font-style: normal;
}

.class {
font-family: 'Имя шрифта', Arial;
}

Вот и все, радуемся и пользуемся. Не злоупотребляйте 😉