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

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

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

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

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

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

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.