Заходим в сервис сайта FontSquirrel, жмём добавить, загружаем необходимый нам шрифт, соглашаемся с условием не коммерческого использования поставив галочку в чекбоксе и получаем архив со шрифтами для различных устройств в пяти форматах: 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

Важно! Нас конечно интересуют шрифты с кириллическим содержанием. Так вот если вы выберете режим Optimal — кириллическая часть шрифта не будет загружена. Поэтому выбирайте режим Expert и ставьте галочку напротив Cyrillic.

fonts

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

Архив именуется приблизительно в такой форме 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: "Мой новый шрифт"; }

Источник статьи: YOOtheme — форум русскоязычной поддержки

3 комментария : “Как добавить новый шрифт в шаблон от YOOtheme”

  1. Оксана says:

    Здравствуйте! Подскажите, пожалуйста, пункт «Создаём в CSS файле подключение шрифта ПХП командой подключения (include) для его подключения в fontname.css»

    В каком конкретно файле CSS нужно прописать команду include? и как эта команда выглядит? В целом получилось нужный шрифт подключить и без этого пункта, но для личного развития хотелось бы знать ответ =)

    • Постоялец says:

      Откровенно говоря, я и сам пропустил как то этот пункт. А статью копировал больше для себя (как заметку) с другого сайта, который уже погиб. В общем вы меня поставили в тупик. Пошерстил несколько конфигураций Yootheme на предмет поиска этого подключения — нигде его нет.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *