Открыть меню    

CSS3 @font-face или как использовать любой шрифт на сайте

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

В этой статье показано, как использовать свойство @font-face.

font_face

Как использовать свойство @font-face?

Итак, для того чтобы применять свойство CSS3 @font-face, вы должны выполнить следующие три шага (также можете посмотреть демо).

Для примера я воспользовался шрифтом 3Dumb от Font Squirell.

применяем свойство font_face

1. Загрузите шрифт на ваш сервер

Просто откройте ваш FTP инструмент и загрузите шрифт на ваш сервер, отметьте местоположение шрифта. Если вы не нашли подходящий шрифт для своего сайта, то можете попробовать эти:

  • Dafont
  • Fontsquirrel
  • Urbanfonts

2. Отметьте это в вашем CSS файле

CSS


@font-face {
        font-family: '3DumbRegular';
        src: url(‘your-path/3Dumb-webfont.eot’); /* строчка для браузеров от IE */
        /* для остальных браузеров */
        src: local('?'), url('3Dumb-webfont.woff') format('woff'), url('3Dumb-webfont.ttf') format('truetype'), url('3Dumb-webfont.svg#webfont57ztNrX6') format('svg');
}

В local, указываем название шрифта, который может быть уже есть у пользователя на компьютере.

Вместо слов ‛your-path‛ вы должны предельно точно указать на местоположение вашего шрифта.

Благодаря Paul Irish, мы можем использовать эти кроссбраузерные font-face решения. Как вы можете отметить, для разных браузеров необходимо использовать разные форматы шрифтов.

  • IE (все версии) - EOT
  • Firefox (с 3.5) - TTF/OTF (WOFF с 3.6)
  • Opera (с 10) - TTF/OTF
  • Chrome (все версии) - SVG (TTF/OTF)
  • Safari (с 3.2) - TTF/OTF
  • iPhone/iPad - SVG

3. Правильно применяйте

CSS

h1
{
  font-family: '3DumbRegular', Arial, sans-serif
}

Авторские права

Рекомендую всегда проверять лицензию, прежде чем использовать шрифт в каких-либо целях. Используйте бесплатные шрифты или проверяйте шрифты: возможность включения шрифта в @font-face.

Источник

www.fontsquirrel.com - генерируем нужные форматы шрифта

Допустим, у вас есть шрифт формата true type или open type, используя данный ресурс (www.fontsquirrel.com), вы можете получить все остальные форматы шрифта.

Как сгенерировать шрифты:

  • @font-face generator
  • Вкладка Agreement - поставить галочку, подтвердив права на шрифт
  • Add fonts (выбираем и добавляем наш шрифт, скачиваем архив)

Скачиваем архив. В архиве все нужные формата шрифта. Также, что полезно, будет сгенерирован stylesheet.css, в котором прописана директива font-face.

Комментарии к статье

аватарка пользователя
2013-10-22
Павел

Что значит "Отметьте это в вашем CSS файле"? Куда это "отмечать"? Ну разве трудно нормально всё описать для новичков, если уж вы взялись за это. Как вы уже достали интернетовские умники.

аватарка пользователя
2013-10-22
dnzl

ну что тут непонятного, просто копи0паст вышеприведенный код в ваш css файл, и еще важный момент: пути для шрифтов нужно прописывать относительно стилевого файла . всех благ