Недавно мы публиковали статью — Cufon-нестандартный шрифт на сайте, в которой я рассказывала о способах использования нестандартных шрифтов на сайте, сегодня рассмотрим второй метод – параметр css @font-face .

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

Путь к шрифту прописываем в свойстве src.

корректный код для использования @ font-face будет следующим:

 
@font-face {font-family: MyriadProCond; src: url('MyriadPro-Cond.otf'); 
src: url('myriadpro-cond-web.html'); src: url('myriadpro-cond-webd41d.eot?') format('â?º'), 
url('myriadpro-cond-web.woff') format('woff'),  url('myriadpro-cond-web.ttf') format('truetype'), 
url('myriadpro-cond-web.svg#MyriadProCondensed') format('svg');}

В конкретном примере мы подключили шрифт MyriadProCond. Параметр @font-face задается однократно. В дальнейшем, для того чтобы присвоить объекту шрифт MyriadProCond, просто нужно вызвать его параметром font-family

font-family: MyriadProCond;

Если рассмотреть код подробнее, видим, что для подключения шрифта, нужно задать путь к нескольким его версий вразных форматах. Использование форматов .otf, .eot, .woff, .ttf и .svg обеспечит нам максимальную кроссбраузернисть.

Чтобы получить шрифт во всех этих форматах, нужно его конвертировать. Для этого как нельзя лучше подходит сервис Font Squirrel — www.fontsquirrel.com

 Нестандартный шрифт на сайт. @font-face

Нам нужно зайти на вкладку @font-face Generator и нажать на кнопку AddFonts, выбрать необходимый шрифт, затем, желательно, выбрать параметр Expert и выбрать необходимые для Вас параметры.

Если нужна поддержка кириллицы, для параметра Subsetting: выбираем опцию Custom Subsetting… и там ставим галочку возле  Cyrillic.

Соглашаемся с правилами использования — ставим галочку возле Agreement:  и жмем на кнопку Download Your Kit.

На выходе получим архив с шрифтами и. Html файлами, где наглядно показано их использование.

Подключаем все в css и готово! Пользуемся с удовольствием 🙂

Пример использования параметра @font-face


Font Face Test

 

@font-face — нестандартный шрифт на сайте