Добавить шрифт

Как добавить новый шрифт в шаблон от YOOtheme и в любой другой построенный на фреймворке/платформе Warp, сейчас разберём...

Заходим в сервис FontSquirrel http://www.fontsquirrel.com/ , жмём добавить, загружаем необходимый нам шрифт, соглашаемся с условием не коммерческого использования поставив галочку в чекбоксе и получаем архив со шрифтами для различных устройств в пяти форматах: TTF, OTF, EOT, SVG и WOFF

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

Добавляем шрифт в шаблон

Архив именуется приблизительно в такой форме webfontkit-20130219-086789.zip, 20130219 – дата создания, 086789 – порядковый номер. В архиве мы видим файл Мой новый шрифт-demo.html, это демо файлик, открываем его во всех доступных браузерах и проверяем работоспособность шрифта.

В демо есть 4 вкладки показывающие поведение шрифта в различных ситуациях, в последней вкладке написаны рекомендации по установке шрифта, далее, мы убедились в корректной работе шрифта (отображении текста в различных браузерах), теперь остается только подключить шрифт. В корне архива видим файлы шрифтов *.eot, *.svg, *.ttf и *.woff, загружаем файлы по ФТП в директорию /fonts. Создаём в CSS файле подключение шрифта ПХП инструкцией/командой подключения (include) для его подключения в fontname.css Редактируем файл /layouts/template.config.php добавив новую секцию:

Код:

// load fonts
$this['asset']->addFile('css', 'template:fonts/Мой новый шрифт.css');

Обновляем кеш и в config.xml прописывается новый шрифт который затем мы можем выбрать в админ-панели сайта в разделе настроек шаблона. Он становиться доступен в 3 полях настроек шрифта в шаблоне (Body, Header and Menu Font)

Код:

<field name="font1" type="list" default="default" label="Body Font" description="Select the main body typeface.">
	<option value="arial">Arial</option>
	<option value="lucida">Lucida</option>	
	...
	<option value="myfont">Мой новый шрифт</option>

Далее:
создаём Мой новый шрифт.css файл для нового шрифта в /css/font1 директории.

Код:

body { font-family: "Мой новый шрифт"; }