Сегодня все совремменые браузеры (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+) работают с нестандартными шрифтами встроенным в сайт посредством CSS.

Все больше и больше веб мастеров начинают использовать эту возможность.

Я хочу поделиться своим опытом встраивания стороннего шрифта в сайт посредством @font-face.

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

Итак, начнем:

Самое сложное в этом деле — это найти подходящий шрифт который можно без лицензионных проблем использовать на своем сайте. Свободных кириллических шрифтов не так уж много, но все-таки они есть. За шрифтом мы отправимся на сервис www.abstractfonts.com.

Заходим на сайт и сразу же идем по вкладке Languages где выбираем кириллицу (Cirillic), а дальше ищем подходящий нам шрифт.

Например мне приглянулся шрифт Devroye Unicode просматривая информацию о шрифте я отметил, что: Free for personal and commercial use and distribution — значит шрифт можно использовать у себя в проекте.

Прежде чем сохранить шрифт я убедился в наличии в нем кириллистических символов нажав на TTF, не все заявленные кириллистические шрифты в действительности являются таковыми.

У других шрифтов информация о лицензии можно найти в месте с информацией об авторе шрифта, например, как у шрифта DS Kolovrat.

Дальше с выбранным шрифтом мы идем на сайт к белке-шрифтелке в раздел @font-face Generator. Загружаем свой шрифт нажав кнопку Add fonts после того как шрифт загрузился выбираем EXPERT..., в раскрывшейся таблице в поле Subsetting: выбираем Custom Subsetting..., а там в поле Language: выбираем Cyrillic. Осталось поставить галочку в поле Yes, the fonts I'm uploading are legally eligible for web embedding. и нажать на появившуюся кнопку Download Your
Kit

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

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

Шрифты могут быть в форматах TTF, OTF, EOT, SVG:

• Internet Explorer (все версии) — EOT;
• Firefox (начиная с 3.5) — TTF/OTF;
• Opera (начиная с 10) — TTF/OTF;
• Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
• Safari (начиная с 3.2) — TTF/OTF.

Теперь на примере темы default я расскажу, как подключить и изменить шрифт в самых заметных частях страницы.

Первым делом мы подключаем шрифты. В теме default создаем папку font в которую помещаем папку devroyun с нашими шрифтами.

Дальше мы прописываем пути к шрифтам в файле default/css/style.css

@font-face { font-family: 'devroyun'; src: url('{$tpl}css/font/devroyun/devroyun.eot'); src: local('O'), url('{$tpl}css/font/devroyun/devroyun.woff') format('woff'), url('{$tpl}css/font/devroyun/devroyun.ttf') format('truetype'), url('{$tpl}css/font/devroyun/devroyun.svg#webfontE40g3tc3') format('svg'); font-weight: normal; font-style: normal; }
Теперь, что бы изменить шрифт в каком-либо участке текста мы в стилях прописываем font-family:devroyun;.

Пример

• Панель меню: для этого необходимо скопировать файл tabs.panel.css из /gears/global/css/ в templates/default/gears/global/css/ в нем найти:
  
  table.tabs td a { text-decoration: none; } куда добавим наш шрифт font-family:devroyun;
  
  получим:
  table.tabs td a { text-decoration: none; font-family:devroyun; }

  

• Теперь заменим шрифт в заголовке виджета. В файле templates/default/gears/sidebar/css/widget.css найдем #sidebar .widget .widget-header h3 где заменим font-family: «Lucida Grande»,Verdana,Arial,sans-serif; на font-family:devroyun;

  

• Заменим заголовки в посте: скопируем файл nodes.css из /gears/nodes/css/ в /templates/default/gears/nodes/css/ предварительно создав папки nodes/css/ в файле найдем:
  
  .node .title куда добавим наш шрифт font-family:devroyun;

  

Пример использования старонних шрифтов можно посмотреть в теме MyWall
Желаю удачи в создании красивых и оригинальных сайтов на Cogear.