1с битрикс подключение jquery
Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие галереи и прочее- то таких внешних скриптов может набежать по 10/20 на сайт. Имеет смысл объеденить их в один, для большей скорости загрузки сайта и в принципе для оптимизации. Это, конечно, можно проделать вручную но можно воспользоваться функционалом битрикс.
Почему то все скрипты начинают срабатывать дважды
А если отключаете свой
Не сразу заметил, у вас там ";" лишняя вроде бы, если смайлик не врет
Здравствуйте, Михаил!
У меня вопрос ни могу понять в чем дело, но битрикс не хочет подключать первый подключенный не стандартный шрифт у меня их 6 и причём если меняю местами первый на второй, а второй на первый происходит тоже самое тот что был вторым и стал первым перестаёт работать я уже голову сломал не могу понять.
Css файлы объединил в один через
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/bootstrap.css" ;
JS файлы так же $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/bootstrap.min.js" ;
На сайте также используются и и коночные шрифты font-awesome.css они работаю нормально всё остальные также работают но только если не первыми в очереди.
Не знаю уже что и думать может есть какое то ограничение на количество шрифтов.
Да и ещё пробовал и подключать обычным способом / не помогло тоже кешь сбрасывал и отключал ничего не помогает.
Надеюсь на вашу помощь и хочу сразу сказать если даже не сможете помочь всё равно спасибо за все ваши труды и информацию что вы предоставляете.
Михаил, вообщем я нашёл для себя единственное и по моему правильное решение это подключать эти шрифты отдельным файлом и объединить в один через SetAdditionalCSS это так работает и думаю что правильно но почему не работает когда эти шрифты находятся в template_styles.css непонятно причем я заметил если перед первым шрифтом поставить какой нибудь класс то тоже работает но подумал что это будет не правильно.
Подключать на сайте нужно конечно сжатый вариант, т.к. он меньше размером, это экономит трафик и быстрее грузится клиентами.
Версии jQuery
На сегодняшний день существует три основные версии jQuery 1.x, 2.x, 3.x , а также урезанный вариант без аякса (ajax) и анимаций (effects) jQuery 3.x slim
Разница в версиях конечно же есть, последняя версия стала меньше размером, устаревшие функции удалены, с версии 2.x убрали и поддержку устаревших браузеров IE 6-8, сейчас jQuery поддерживает Internet Explorer 9+.
Если вы решили перейти с одной версии на другую, проблемы скорее всего возникнут, какие-то устаревшие методы придется искать в шаблоне и заменять на новые, если вы в этом понимаете, тогда все решаемо, иначе вам в помощь есть jQuery Migrate Plugin, но лучше конечно в шаблоне все переписать, что-то дополнительное подключать вообще не желательно, это все замедляет открытие страницы клиентом.
Загрузка jQuery
Скачивайте jQuery только с официального сайта, на странице скачивания будут только последние актуальные версии, в сжатом и несжатом виде, если вам нужна другая версия, тогда либо jQuery CDN, либо jQuery Core, либо Github.
Но тут у вас может возникнуть вопрос, что будет лучше:
- Скачивать библиотеку на сайт и подключать ее локально
- Не скачивать, а подключить просто ссылку на CDN-сервер
В первом случае с библиотекой ничего не изменится, она хранится на вашем сервере, не подвержена заражению, можно сжимать и кэшировать с помощью ПО сервера, но каждый клиент ее будет загружать в браузер только на первом хите, далее браузер будет брать ее из кэша, только вот такой незначительный минус.
Во втором случае библиотека может быть уже закэширована, когда клиент первый раз откроет ваш сайт, т.е., если на каком-то другом сайте была библиотека подключена аналогичным образом с CDN, то она уже будет в кэше браузера клиента и при первом открытии сайта он чуть быстрее откроется у клиента, это также сэкономит трафик.
Но тут не все так красиво, как кажется, минусов гораздо больше и они очень важны для вашего сайта, в данном случае CDN сервер может висеть или даже не работать, в этом случае на вашем сайте все будет тормозить или даже не работать, а также удаленный CDN сервер могут взломать и заразить библиотеку, в этом случае ваш сайт может быть заражен через нее, а также все его посетители, зараза она такая, распространяется мгновенно, таким способом могут красть персональные данные ваших посетителей, их куки, делать различные редиректы на другие ресурсы при определенных условиях и т.д.
Также я наслышан о псевдо супер скорости CDN, которую еще ни на одном сайте не видел, возможно если вы за границей живете и там открываете сайт, или HDD-диск на вашем сервере уже на последнем издохе, то да, ближайшие к вам серверы отдают статику быстро, я лично в Новосибирске, и все сайты клиентов, которые приходили ко мне с включенным CDN, ужасно тормозили и открывались даже по несколько минут, вся эта скорость зависит от местоположения, про это говорят многие разработчики, не только я один, так что, в России про эту сомнительную скорость CDN забудьте, а вот про маркетинг не забывайте.
Лично я подключаю jQuery всегда первым способом, локально на сайте, и вам советую, т.к. всего из-за одного хита рисковать всем сайтом, бизнесом, клиентами не вижу смысла.
Подключение jQuery
Подключение jQuery требует определенных условий, это поможет вам либо разобраться с ошибками, либо избежать их:
- jQuery должна быть подключена на странице, в хедере или футере не важно;
- jQuery должна быть на странице в одном экземпляре, ни 2, ни 5 шт., только одна;
- jQuery должна подключаться на странице самой первой перед всеми ее плагинами, никак не после;
- jQuery должна подключаться и храниться локально на вашем сайте, а не на удаленном;
- jQuery-плагины должны быть совместимы с вашей версией jQuery, они все зависят от нее, все конфликтующие плагины нужно заменять на рабочие.
Теперь, как это выглядит на практике, обратите внимание на порядок, сначала подключается jQuery, потом все остальные плагины, а также ваши личные скрипты fn.js , которые могут использовать плагины.
А вот отдельно какие-то JS-скрипты не зависящие от jQuery где подключать не важно, может и перед jQuery, может и после, без разницы, они от нее не зависят.
Подключение jQuery в 1С Битрикс
Как подключать jQuery и плагины в старом ядре я уже писал здесь, сегодня рассмотрим как правильно подключить jQuery в новом ядре 1С Битрикс.
Итак, в идеальном мире, когда подключение скриптов контролирует разработчик сайта, а не Битрикс, header.php должен быть примерно таким, т.е. в каком порядке разработчик подключает скрипты и стили, в таком порядке они и должны выводиться.
Но в Битриксе это будет правильно работать до первого установленного модуля из Маркетплейс, в которых используются другие устаревшие методы подключения jQuery и скриптов.
Я сейчас проверил и даже в новом методе есть проблема, скрипт Hello asset1 будет выводиться после скриптов ядра мимо порядка в шаблоне, т.е. опять перед jQuery в моем хедере, а вот скрипт Hello asset2 отработает нормально, как я в шаблоне определил, но вручную надо задавать его порядок, что опять возня.
Вот обратите внимание
Как убрать другие jQuery
Пока ничего с этим не поделать, вам остается находить все места на сайте и в админке, где подключаются jQuery, это может быть и настройки какого-то модуля в админке, в настройках компонента на странице, и вообще железно прописанное подключение в стороннем компоненте или по событию, с которым вы ничего не сможете сделать, кроме как вручную в коде убрать подключение или вообще удалив этот модуль с сайта, самое простое решение проблемы.
Подключаем jQuery правильно!
Решить проблему вывода сторонних плагинов выше jQuery из хедера можно двумя способами, замените вот эту строчку в хедере или закомментируйте
1) Либо вот на эту, также как в старой статье я делал, тоже рабочий вариант с кэшированием
2) Либо вот на эту, это из ядра Битрикса подключит jQuery
jquery - подключит jQuery 1.8.3
jquery2 - подключит jQuery 2.1.3
Только при таком способе вы избавитесь от проблем с подключением скриптов и плагинов из сторонних модулей, подключенная в вашем шаблоне сайта jQuery всегда будет выводиться первой перед остальными плагинами, но проблема с подключением jQuery также останется, за этим нужно постоянно следить и отключать все лишние jQuery.
Помните, только одна jQuery должна подключаться, либо ваша в шаблоне (вариант 1), либо из ядра Битрикса (вариант 2), все jQuery из сторонних модулей нужно отключать, т.к. они могут вызываться только на одной странице.
Частые проблемы с jQuery на сайтах
1) jQuery не подключена вообще;
2) jQuery подключена раз 5-10, а должна быть подключена только 1 раз;
3) jQuery подключена после вызова jQuery-плагинов, а должна подключаться самой первой;
4) JS-ошибки на странице, после которых весь остальной JS-код и плагины не работают;
5) Версия jQuery не соответствует минимальной по требованию;
6) Подключена переписанная разработчиком jQuery, которая ведет себя не предсказуемо;
7) Подключена кастомная сборка jQuery, часть функций вырезано;
Во всех своих решениях я делаю возможность подключить или отключить jQuery в настройках модуля или компонента, а вот в решениях других разработчиков, к сожалению, такое встретить не всегда удается.
Сегодня узнаем как грамотно оформлять header.php в Битрикс, как правильно подключать .css и .js в header.php, как правильно подключать jQuery в Битрикс и как включить сжатие .css и .js файлов в Битрикс.
Это очень острая и актуальная проблема на сегодняшний день. Самые частые обращения по модулям связаны с ошибками в скриптах, когда неправильно подключена jQuery в header.php, и очень часто подключено несколько jQuery, но должна быть подключена на всех страницах сайта только одна библиотека jQuery и самой первой среди всех скриптов шаблона сайта.
На одном сайте был рекорд, я насчитал 7 подключенных библиотек jQuery, просто человек замучился искать ошибки и деваться уже некуда было, когда проблема была найдена и исправлена, все стало работать на сайте правильно.
Правильный header.php в Битрикс
Итак, как грамотно должен быть оформлен файл header.php шаблона сайта в Битрикс:
- Перед не должно быть никаких пробелов и переносов
- Кодировка страницы задается перед
- После заголовка перечисляются все мета-теги
- После мета-тегов подключаются .css стили сайта
- И только после подключения .css стилей подключаются все .js скрипты
- Комментарии к IE по возможности лучше опустить в самый конец перед закрывающим тегом
Пример header.php для HTML 5 DOCTYPE
//Тут стили шаблона сайта
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/uikit.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/form-password.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/sticky.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/placeholder.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/jquery.responsive-tabs.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/nanoscroller.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/scrollup/image.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/pace.min.css');
//Тут скрипты
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/core.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/grid.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/modal.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/dropdown.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/scrollspy.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/utility.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/button.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/switcher.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/nav.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/components/sticky.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/components/form-password.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/pace.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.nanoscroller.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.responsiveTabs.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/switchery.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/readmore.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.scrollUp.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/fn.js');
//Тут выводим скрипты
$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();
?>
CUtil::GetAdditionalFileURL() - генерирует url к файлу с указанием метки версии файла, т.е. он будет кешироваться в браузере посетителя.
SITE_TEMPLATE_PATH - это константа указывающая URL от корня сайта до папки текущего шаблона включая имя папки, если измените папку шаблона, то в header.php ничего исправлять уже не придется, он изменится в этой константе, например: /bitrix/templates/папка шаблона сайта/
Разберем представленный выше код header.php детально, чтобы понимать, что тут для чего подключается.
Хочу обратить внимание на передаваемые параметры true и false в методах, например ShowMeta() и ShowCSS(), от них зависит стандарт вывода тегов, для HTML 4, HTML 5 в виде , иначе по стандарту xHTML в виде , в данном примере для HTML 5, подробнее читайте в API-документации Битрикс.
Тут мы выводим мета-теги "описание" и "ключевые слова" для поисковых систем.
$APPLICATION->ShowMeta("robots", false, false);
$APPLICATION->ShowMeta("keywords", false, false);
$APPLICATION->ShowMeta("description", false, false);
?>
Методом SetAdditionalCSS() подключаем стили шаблона, так каждый стиль.
Метод ShowCSS() выводит все стили шаблона и стили, которые могут подключаться в компонентах Битрикс, т.е. вообще все подключенные стили, включая стили ядра Битрикс.
Перед подключением вообще всех скриптов сайта и только для браузера Internet Explorer младше IE 9 я подключаю специальные полифилы функций/методов, которые в нем отсутствуют и вызывают ошибки javascript, возможная самая частая ошибка типа Object doesn't support property or method 'forEach'.
Т.е. если какого-то метода нет в IE 8, но он используется в новой jQuery или каком-то плагине, то может повезет и он найдется в этом скрипте, но Вы можете его не подключать, только если нужен.
А вот и подошли мы к самому интересному, на этом этапе самая частая ошибка подключения jQuery, которая должна выводиться самой первой среди всех остальных подключенных в компонентах или в шаблоне сайта jQuery-плагинах, т.е. ошибок с подключенными где-то в компоненте или шаблоне jQuery-плагинами быть не должно!
Все плагины и скрипты будут подключаться как положено, после jQuery, а не как у многих, в обратном порядке, это базовое правило подключения плагинов jQuery, знать его нужно всем!
Методом AddHeadScript() подключаем скрипты шаблона и только после подключения стилей, стили всегда подключайте выше скриптов.
Ниже два заключительных метода "выводят":
Обратите внимание на порядок, именно в таком порядке!
Почему строго в таком порядке?
Потому что в методе ShowHeadStrings() может выводиться jQuery ядра Битрикс, вызываемая таким образом:
Я ее специально закомментировал, чтобы Вы это знали, и знали где подключать. Вызываться он может в любом компоненте, в шаблоне, на любой странице сайта, а выводится она именно в этом самом первом методе, если поменять их местами, она окажется в самом низу, вот и ошибка разработки, можно это смело добавлять в чек-лист по разработке сайта.
Но если Вы выводите встроенную jQuery, значит подключенную ранее вручную jQuery надо удалить со страницы, не забывайте, она должна быть одна на всем сайте!
Итак, все это подключенное в исходном коде выглядит так:
Это конечно все круто! Но, как мы видим, к серверу очень много запросов - 93 шт., много подключено всяких файликов, а это заметно сказывается на скорости загрузки страницы, на время ожидания клиентом, мне-то как разработчику очень удобно, наглядно все видно в коде, но посетители мои от этого заметно страдают.
Оказывается, в Битрикс есть отличные опции в настройках главного модуля, позволяющие:
- Объединять CSS файлы
- Объединять JS файлы
- Подключать минифицированные версии CSS и JS файлов
- Создавать сжатую копию объединенных CSS и JS файлов - нужно отключить
Включается сжатие и объединение .css и .js здесь:
Поставьте галочки и сохраните настройки модуля зеленой кнопкой Сохранить.
При включении этих опции в идеальном случае на странице подключается 3 css и 3 js файла, подробнее читайте в курсе про Сжатие css и js файлов.
Создавать сжатую копию объединенных CSS и JS файлов - это нужно отключить!
Потому что при включенной опции Битрикс сжимает вообще все подключенные на сайте скрипты и стили со всех страниц сайта, это и вес им прибавляет, и велика вероятность появления JS-ошибок на странице.
Лично я столкнулся с такой проблемой, JS-ошибка запросто будет в модуле, где у jQuery-плагина есть js-lang, эти лэнги хранятся в соответствующих php-файлах, вот если на странице сайта подключается какое-то расширение, то Битрикс его также сжимает, скрипт этого расширения будет на всех страницах сайта, а вот лэнги расширения подключаются только на той странице, где вызывается расширение, если jQuery-плагин не видит свой js-lang, то запросто может быть на странице js-ошибка.
Например, я свой jQuery-плагин подключил как расширение на странице Каталог, тут же и лэнги моего плагина подключаются, вот если включить сжатую копию всех JS-файлов, мой плагин будет на всех страницах сайта в хедере, а лэнг только на странице Каталог, соответственно, когда я открываю например главную страницу сайта или любую другую отличную от Каталога, то в консоли появляется JS-ошибка, т.к. лэнги моего плагина подключаются только на странице Каталог.
В общем, очень опасная опция, не включайте ее вообще.
Все, сжатие включено и должно работать.
Для точного результата работы сжатия необходимо разлогиниться, далее открывайте главную страницу сайта, обновите ее, откройте исходный код и увидите такую картину
Наглядно видим, насколько уменьшилось количество файлов, все скрипты шаблона сжаты в один файл, стили также в один файл.
Количество запросов уменьшилось в разы, время полной загрузки страницы сократилось с 3.8сек. до 1.8сек., запросы к серверу сократились с 93 до 43.
Заключение
Данный способ конечно не является идеальным, но он послужит хорошим образцом, как все подключать и в каком порядке, и как не совершать грубейших ошибок при разработке сайта.
Обязательно изучите все моменты подключения jQuery, скриптов и стилей, их порядок и включайте сжатие на сайте, это существенно ускорит время загрузки страницы и время ее отклика на действия посетителя, облегчит ее и нагрузку на сервер, сайт даже меньше трафика станет потреблять, т.к. каждый файлик на вашем сайте - это трафик!
Также, советую избавляться от всех малонужных и устаревших jQuery-плагинов, ко многим можно найти замену меньшую в разы и даже лучше по функционалу.
Это была моя первая статья из курса "Ускорение сайта", продолжение следует.
Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс
Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс
Для чего подключать скрипты и js через API
Это нужно для правильной оптимизации сайта. CMS Битрикс, умеет самостоятельно объединять и сжимать подключаемые файлы стилей и js файлы. Если вы подключите их по старинке, простыми вставками вида
Однако тогда вы не сможете перенести оптимизацию сайта на плечи системы управления. На много правильнее, подключать эти файлы с помощью API Битрикс
До выхода нового ядра D7
По условиям обратной совместимости, использовать можно оба метода. Лично я предпочитаю подключать по старинке, без использования D7- но оба способа работают правильно и принципиальной разницы не имеют
Подключив внешние файлы правильно, через ядро Битрикс, вы сможете максимально оптимизировать создаваемый сайт. Объединить и сжать css файлы
Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов, объединение css файлов.
Самое главное, вы сможете подключать необходимые файлы в "объединение" по необходимости, в зависимости от требуемого функционала страницы или компонента. То есть, по факту у вас вегда будет один файл css и один js, но их состав и соотвественно объем, будет разный в зависимости от текущей страницы или раздела сайта
Подключение стилей и js в шаблонах компонентов
Если нужно подключить стили и скрипты, в нутри шаблонов компонентов. Например, вы используете слайдер, на основе списка новостей: у него может быть много js и css и не целесообразно, подключать его кишочки, глобально ко всему сайту. Просто поспользуйтесь такой конструкцией
Оптимизируйте. Ни кто не любит тормозящие сайты, тем более это просто и не требует больших трудо затрат
Мои каналы:
Каналы на которые я выкладываю видео. Контент дублируется, смотрите где удобнее.
Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие галереи и прочее- то таких внешних скриптов может набежать по 10/20 на сайт. Имеет смысл объеденить их в один, для большей скорости загрузки сайта и в принципе для оптимизации. Это, конечно, можно проделать вручную но можно воспользоваться функционалом битрикс.
Данная возможность позволяет автоматически, без заморочек объеденить весь javascript в один файл
Пример на моем сайте
При верстке своего сайта я использовал 5 javascript файлов: фансибокс, табы, карусель контента. В исходной html верстке это выглядело так
Для того, что бы при интеграции с битрикс, автоматически, все эти файлы объеденились в один, сжались и вывелись в head шаблона достаточно подключить их вот так
Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов.
После этого все ваши js файлы объединяться и сожмутся, что значительно ускорит работу сайта, подгрузку js да и поисковые системы будут рады.
PS: Точно так же, можно объединять подключаемые файлы стилей
Мои каналы:
Каналы на которые я выкладываю видео. Контент дублируется, смотрите где удобнее.
Почему то все скрипты начинают срабатывать дважды
А если отключаете свой
Не сразу заметил, у вас там ";" лишняя вроде бы, если смайлик не врет
Здравствуйте, Михаил!
У меня вопрос ни могу понять в чем дело, но битрикс не хочет подключать первый подключенный не стандартный шрифт у меня их 6 и причём если меняю местами первый на второй, а второй на первый происходит тоже самое тот что был вторым и стал первым перестаёт работать я уже голову сломал не могу понять.
Css файлы объединил в один через
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/bootstrap.css" ;
JS файлы так же $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/bootstrap.min.js" ;
На сайте также используются и и коночные шрифты font-awesome.css они работаю нормально всё остальные также работают но только если не первыми в очереди.
Не знаю уже что и думать может есть какое то ограничение на количество шрифтов.
Да и ещё пробовал и подключать обычным способом / не помогло тоже кешь сбрасывал и отключал ничего не помогает.
Надеюсь на вашу помощь и хочу сразу сказать если даже не сможете помочь всё равно спасибо за все ваши труды и информацию что вы предоставляете.
Михаил, вообщем я нашёл для себя единственное и по моему правильное решение это подключать эти шрифты отдельным файлом и объединить в один через SetAdditionalCSS это так работает и думаю что правильно но почему не работает когда эти шрифты находятся в template_styles.css непонятно причем я заметил если перед первым шрифтом поставить какой нибудь класс то тоже работает но подумал что это будет не правильно.
Читайте также: