Альтернативные шрифты при помощи @font-face
Чуть раньше я рассказывал о использовании сторонних шрифтов на вашем сайте при помощи аплета Cufon. Но вот новые свойства стали поддерживать большинство браузеров и наконец то можно спокойно использовать @font-face. К сожалению и с ним не все так хорошо как хотелось бы, например для разных браузеров нужны разные расширения шрифтов и ttf не везде подходит, но об этом позже, а сейчас…
По данным статистики на данный момент минимум 92% браузеров полноценно поддерживают @font-face. На первый взгляд все просто, вызываем шрифт прямо в CSS и выбираем его в классе:
1 2 3 4 5 6 7 8 9 10 | // Объявляем шрифт @font-face { font-family: 'Имя шрифта'; src: url('путь/до/шрифта'); } // Применяем шрифт .class { font-family: 'Имя шрифта', Arial; } |
Здесь в src: url указывается путь до файла со шрифтом, в src: local — название шрифта на локальной машине на тот случай, если у юзера этот шрифт уже есть. Но дальше не все так просто, разные браузеры используют разные расширения шрифтов.
Форматы шрифтов
Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:
Кросс-браузерность
Для лентяев есть очень хороший сервис — FontsQuirrel. Который позволяет сэкономить куче времени на создании файлов с шрифтов. Он позволяет загрузить свой шрифт и получить его в архиве в разных расширениях.
Порядок действий:
1. Загружаем свой шрифт.
2. Выбираем Expert.
3. В пункте Subsetting выбираем «No Subsetting» иначе у нас не будут поддерживаться русские буквы.
4. Соглашаемся и скачиваем архив.
5. Из архива вытаскиваем наши шрифты.
Правильное подключение
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @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; } |
Вот и все, радуемся и пользуемся. Не злоупотребляйте 😉