Как подключить шрифты в less

Less миксины – готовая авторская подборка

В прошлом уроке «Less для самых маленьких» я уже говорил про миксины и то, как ими пользоваться. В рамках данного поста так сильно все затягивать не буду, если что, просто прочитайте ознакомительную заметку сами и все поймёте сразу. Тут же я просто предложу и немного расшифрую свою коллекцию, где less миксины, которые использую я сам в своей работе и начну с самых простых.

Работа со шрифтами

Первый и один из самых важных моментов в разработке – это подключение шрифтов. Никогда не любил по 100 раз все писать и хотелось быстренько подключать все необходимое.

// Подключение шрифтов .font(@family, @filename: @family, @weight: normal, @style: normal) < @font-face < font-family: @family; src:url('../fonts/@.eot'); src:url('../fonts/@.eot?#iefix') format('embedded-opentype'), url('../fonts/@.woff') format('woff'), url('../fonts/@.ttf') format('truetype'); font-weight: @weight; font-style: @style; > >

Использование в работе: .font(Roboto,Roboto Bold,bold,notmal);

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

Следующий вариант уже перестал использоват из-за массовой поддкржки браузеров единиц измерения rem. Однако если нужно, то можете смело брать и пользоваться.

.f(@size) < font-size: @size*1px; font-size: (@size / 10rem); >

Использует так: .f(16); в результате вы получите две строки, в первой будет введённое значение в пикселях, второе уже в rem. Однако не зебудьте у HTML выставить значение font-size: 62,5% чтобы все как надо работало.

Адаптивная верстка и быстрая работа с @media

Сразу с места в карьер:

// Адаптив .r(@size, @rules) < @media screen and (max-width: @size*1px) < @rules(); >> .lg(@rules) < @media screen and (max-width: 1200px) < @rules(); >> .md(@rules) < @media screen and (max-width: 992px) < @rules(); >> .sm(@rules) < @media screen and (max-width: 768px) < @rules(); >> .xs(@rules) < @media screen and (max-width: 576px) < @rules(); >>

Как это все использовать на практике:

Пишем

.wrapper < font-size: 1.6rem; border: 1px solid red; background-color: #f1f1f1; .r(1000, < font-size: 2rem; border: none; background-color: red; >); >

В результате получаем в css следующую запись.

.wrapper < font-size: 1.6rem; border: 1px solid red; background-color: #f1f1f1; >@media screen and (max-width: 1000px) < .wrapper < font-size: 2rem; border: none; background-color: red; >>

Это был лишь первый миксин из списка, если в западло писать размер ширины точки остановки, то в списке представлены примеры для bootstrap сетки.

Остальные свои заготовки я просто скину в виде готового комплекта, чтобы было удобно скопировать его к себе и более не отнимать твоё время.

Готовый файл _mixin.less

// Адаптив .r(@size, @rules) < @media screen and (max-width: @size*1px) < @rules(); >> .lg(@rules) < @media screen and (max-width: 1200px) < @rules(); >> .md(@rules) < @media screen and (max-width: 992px) < @rules(); >> .sm(@rules) < @media screen and (max-width: 768px) < @rules(); >> .xs(@rules) < @media screen and (max-width: 576px) < @rules(); >> // Размер шрифта в rem .f(@size) < font-size: @size*1px; font-size: (@size / 10rem); >// Быстрый квадрат .sq(@size) < height: @size*1px; width: @size*1px; >// базывые параметры для before и after .bf() < position: absolute; content: ' '; >// Цвет placeholder .ph(@color) < &::-webkit-input-placeholder < color: @color >&:-moz-placeholder < color: @color >&::-moz-placeholder < color: @color >&:-ms-input-placeholder < color: @color >> // Подключение шрифтов .font(@family, @filename: @family, @weight: normal, @style: normal) < @font-face < font-family: @family; src:url('../fonts/@.eot'); src:url('../fonts/@.eot?#iefix') format('embedded-opentype'), url('../fonts/@.woff') format('woff'), url('../fonts/@.ttf') format('truetype'); font-weight: @weight; font-style: @style; > > // Transition .trs(@time: 0.3, @type: ease-in, @for: all) < -webkit-transition: @for @type @time*1s; -moz-transition: @for @type @time*1s; -o-transition: @for @type @time*1s; transition: @for @type @time*1s; >// Черно-белое изображение .gr() < -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; >// Цветное изображение .grh() < -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: none; >// Градиент .gradient(@from: #000, @to: #fff) < background-color: @from; background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background-image: -webkit-linear-gradient(top, @from, @to); background-image: -moz-linear-gradient(top, @from, @to); background-image: -o-linear-gradient(top, @from, @to); background-image: linear-gradient(to bottom, @from, @to); >// Translate .trft(@x, @y: @x) < transform: translate(@x * 1%, @y * 1%); >// Фоновое изображение .bgi(@image, @type: jpg) < background-image: url('../img/@.@'); >

Если тебе есть что добавить, то пиши в комментариях все эти моменты. А я же прощаюсь, не забывай делиться записью в соц. сетях, чтобы было больше посетителей на данном сайте. Удачи!

Как подключать шрифты в LESS?

https://gist.github.com/zhdanovartur/6121601
Нагуглил такую процедуру, но я как-то не разобрался, и не думаю, что разработчиками не предусмотрено подключение нестандартных шрифтов.

Вопрос задан более трёх лет назад
8562 просмотра

Комментировать

Решения вопроса 0

Ответы на вопрос 2

lenaShelest @lenaShelest

Я для этого сделала примесь:

.font(@fontName; @urlName: @fontName; @weight: normal; @style: normal) < font-family: '@'; src: url('/fonts/@/@.eot'); src: url('/fonts/@/@.eot#iefix') format('embedded-opentype'), url('/fonts/@/@.woff') format('woff'), url('/fonts/@/@.ttf') format('truetype'), url('/fonts/@/@.svg') format('svg'); font-weight: @weight; font-style: @style; >

Потом вызываю её:

@font-face < .font(@fontRegular); >@font-face

Предварительно задав переменные с необходимыми шрифтами:

@fontRegular: 'OpenSans'; @fontBold: '@-Bold';

На выходе получаю готовый CSS =)

@font-face < font-family: 'OpenSans'; src: url('/fonts/OpenSans/OpenSans.eot'); src: url('/fonts/OpenSans/OpenSans.eot#iefix') format('embedded-opentype'), url('/fonts/OpenSans/OpenSans.woff') format('woff'), url('/fonts/OpenSans/OpenSans.ttf') format('truetype'), url('/fonts/OpenSans/OpenSans.svg') format('svg'); font-weight: normal; font-style: normal; >@font-face < font-family: 'OpenSans'; src: url('/fonts/OpenSans-Bold/OpenSans-Bold.eot'); src: url('/fonts/OpenSans-Bold/OpenSans-Bold.eot#iefix') format('embedded-opentype'), url('/fonts/OpenSans-Bold/OpenSans-Bold.woff') format('woff'), url('/fonts/OpenSans-Bold/OpenSans-Bold.ttf') format('truetype'), url('/fonts/OpenSans-Bold/OpenSans-Bold.svg') format('svg'); font-weight: bold; font-style: normal; >

Вот, собственно, и всё) Может кому будет полезно.

Ответ написан более трёх лет назад

Как подключить и оптимизировать нестандартные шрифты

Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.

Самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными. Достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

Но чаще дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. Тогда файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть использование стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.

Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

body

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

Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.

Подключение шрифтов с помощью @font-face

Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2 , о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.

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

Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .

Базовый вариант правила:

@font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; /* Браузер сначала попробует найти шрифт локально */ src: local("Roboto"), /* Если не получилось, загрузит woff2 */ url("/fonts/roboto.woff2") format("woff2"), /* Если браузер не поддерживает woff2, загрузит woff */ url("/fonts/roboto.woff") format("woff"); >/* Теперь можно использовать шрифт */ body

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.

Оптимизация

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

FOIT, FOUT и FOFT

Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .

Свойство font-display

У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:

auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .

Предзагрузка шрифтов

Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.

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

Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :

Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

Читать:

Как выключить сушку на стиральной машине lg

Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.

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

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

/* latin */ @font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; >/* cyrillic */ @font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; >

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

Полезности

HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
Доклад Вадима Макеева про шрифты.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

Материалы по теме

Полезные команды в cmd на Windows
Как правильно вставлять SVG
Что такое Pixel Perfect вёрстка

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как создать свою less тему в yootheme pro на основе существуюшей?

В чем преимущество использования less файла, вместо custom.css?

1. Вместо двух файлов при переходе на ваш сайт будет грузиться только один.

2. Файл будет минимизирован.

3. Доступ к внутренним переменным темы yootheme (их можно будет использовать в своих CSS правилах).

4. Не все параметры темы доступны для изменения через веб интерфейс. Некоторые доступны только через переменные less.

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

6. Можно полностью избавиться от обращения к CDN гугл и Google fonts.

Как же создать свой less файл на основе выбранной темы yootheme?

Переопределение файлов yootheme pro

Как переопределять различные файлы в темах yootheme pro подробно описано в их документации и обычно не вызывает никаких проблем.

Все что требуется — это создать новую папку в каталоге templates с именем yootheme_child . Можно придумать свое название, которое вам будет по душе — например yootheme_my или yootheme_mysite. Главное условие — название папки должно начинаться со слова yooteheme, а затем идет символ подчеркивания и ваше слово.

Честно говоря, особого смысла придумывать свое название я не вижу, так как чаще всего папка оказывается всего одна и как-то особо ее называть смысла нет. Поэтому с некоторого времени все папки у меня называются одинаково — yootheme_child (так же как в примерах кода yootheme).

Обратите внимание — папка создается не внутри папки yootheme (!), а на одном уровне с ней.

После того как вы создали нужную папку — не забудьте проследовать в настройки -> дополнительно -> child theme и выбрать свою папку.

Затем в этой папке вы создаете те же самые папки, которые существуют в основной теме и в них размещаете те файлы, которые вам требуется переопределить.

Для меня практически обязательным является создание папки CSS и создание в ней файла custom.css. Это позволяет добавлять свои кастомные правила css на свой сайт по своему вкусу. Чаще всего этого вполне хватает, для того чтобы вносить любые правки и изменения в оформление сайта.

Можно также переопределять файлы index.php, header.php и все другие, которые вам могут понадобиться.

Переопределение файла ошибки 404

Можно так же переопределить файл error.php и создать свою кастомную страницу для 404 ошибки.

При копировании этого файла учтите что его понадобится немного изменить — следующие строки понадобится удалить:

// prefer child theme’s error.php if (isset($params[‘child_theme’]) && file_exists($file = $directory . ‘_’ . $params[‘child_theme’] . ‘/error.php’))

Если этого не сделать — ничего работать не будет.

Что делать если шрифты Google нужно перенести на свой сервер?

Однако не всегда предоставленных возможностей хватает. Например бывает нужно перенести все google шрифты к себе на сервер и полностью отказаться от обращения к серверам гугл. В свете последних событий с блокировками телеграм и безумством РКН это становится особенно актуальным. Впрочем и в лучшие времена сервера гугл не были образцом надежности и лично я часто сталкивался с тем, что шрифты просто не грузились или загружались с большой задержкой. В такой ситуации проще и лучше все хранить на своем сервере. Это уменьшает количество DNS запросов и в итоге ускоряет работу сайта.

Шаблон yootheme pro умеет компилировать less файлы и затем минимизировать полученный файл, уменьшая таким образом его размер. Поэтому логично хранить все свои кастомные изменения не в отдельном файле custom.css, а добавлять их в файл выбранной темы yootheme pro чтобы все в итоге попадало в один файл и уменьшало время загрузки сайта.

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

Единственный недостаток — перекомпилирование файла занимает определенное время, которое начинает немного раздражать, если вы работаете над оформлением сайта и вносите множество мелких изменений, которые лучше видеть сразу. В таком случае оптимальный режим работы — вначале все мелкие правки вносить в файл custom.css, а после окончания работы перенести все в основной less файл выбранной темы.

Теперь перейдем к основному вопросу статьи:

Как создать переопределение для less файла основной темы yootheme pro?

Следует отметить, что документация yootheme в данном вопросе вводит в заблуждение. Может быть они ее поправят в новой версии сайта, но пока она не соответствует современной действительности.

Дело в том, что с некоторой поры, помимо основной темы у yootheme появились и цветовые вариации. Вопрос переопределения цветовой вариации в документации никак не освещается. Мало того — существующие рекомендации далеки от тех, которых следует придерживаться. Так как же подключить выбранную цветовую вариацию темы и притом сделать так, чтобы при обновлении темы ничего не стерлось и не поломалось?

В документации ответа на этот вопрос нет, но в тех поддержке ответ на данный вопрос мне все-таки удалось получить. Несмотря на то, что ответили тоже немного не полностью — все остальное уже было несложно додумать самостоятельно.

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

Вначале, в папке yootheme_child мы создаем папку less.

Идем в папку less папки yootheme и выбираем файл нашей темы.

Предположим вы выбрали тему Joline и цветовую вариацию этой темы White Green. Что нам надо сделать?

1. Копируем файл /templates/yootheme/less/theme.joline.less в файл /templates/yootheme_child/less/theme.joline.less

2. Теперь надо переименовать файл /templates/yootheme_child/less/theme.joline.less во что-то другое по своему усмотрению. Замените слово joline на что-то свое. Можно заменить на child. Получаем -> /templates/yootheme_child/less/theme.child.less

3. Теперь в самом файле /templates/yootheme_child/less/theme.child.less нужно в третьей строке в комментарии поменять название темы на наш вариант. В данном случае — Child.

4. Так как из-за переноса файла изменятся пути импорта, их тоже надо изменить.
Вместо @import «platform.less»; пишем @import «../../yootheme/less/platform.less»;
Вместо @import «theme.less»; пишем @import «../../yootheme/less/theme.less»;

// UIkit Core @import "../vendor/assets/uikit/src/less/uikit.less"; // UIkit Theme @import "../vendor/assets/uikit-themes/master/_import.less"; @import "../vendor/assets/uikit-themes/master-joline/_import.less";

// UIkit Core @import "../../yootheme/vendor/assets/uikit/src/less/uikit.less"; // UIkit Theme @import "../../yootheme/vendor/assets/uikit-themes/master/_import.less"; @import "../../yootheme/vendor/assets/uikit-themes/master-joline/_import.less";

Не надо тупо копировать эти строки — обратите внимание — там присутствует имя выбранной темы!

Просто замените ../ на ../../yootheme/ перед именем файла.

5. Не забудьте изменить путь файлу стилей — вместо

@import (optional) "../vendor/assets/uikit-themes/master-joline/styles/@.less";

@import (optional) "../../yootheme/vendor/assets/uikit-themes/master-joline/styles/@.less";

6. Если вам нужно избавить от google fonts то добавьте в конце файла еще вот такую строку:
@internal-fonts: ;

Итак, в результате мы получили вот такой вот файл theme.child.less :

/* Name: Child Background: White Color: Beige Type: Flat Style: white-salmon Name: White Salmon Background: White Color: Red Type: Flat Style: white-green Name: White Green Background: White Color: Green Type: Flat Style: light-green Name: Light Green Background: Light Color: Green Type: Flat Style: light-pink Name: Light Pink Background: Light Color: Pink Type: Flat Style: black-pink Name: Black Pink Background: Black Color: Pink Type: Flat */ // Platform @import "../../yootheme/less/platform.less"; // UIkit Core @import "../../yootheme/vendor/assets/uikit/src/less/uikit.less"; // UIkit Theme @import "../../yootheme/vendor/assets/uikit-themes/master/_import.less"; @import "../../yootheme/vendor/assets/uikit-themes/master-joline/_import.less"; // Theme @import "../../yootheme/less/theme.less"; // // Variables // @theme-headerbar-top-border-width: @global-border-width; @theme-headerbar-top-border: @global-border; .tm-headerbar-top + .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li > a::before 
when (@navbar-nav-item-line-mode) and (@navbar-nav-item-line-position-mode = top) 
 < top: -@theme-headerbar-top-border-width; >// Style @import (optional) "../../yootheme/vendor/assets/uikit-themes/master-joline/styles/@.less"; @internal-style: ; @internal-fonts: ;

Комментарии удалять из него не нужно! Они используются yootheme pro для выбора цветовой вариации темы.

Теперь осталось зайти в yootheme pro и выбрать созданную нами тему с нужной цветовой вариацией:

Если вы хотите избавиться от шрифтов гугл и любого обращения к их CDN — обратите внимание на один нюанс — не забудьте удалить cyrillic (если вы его ставили) в поле «языки». Иначе вы долго будете искать причину, по которой не удаляется обращение к CDN Google.

Затем вам понадобится заменить все имена гугл шрифтов на свои. Например я просто добавляю слово local. И вместо Roboto у меня получается имя шрифта Roboto local.

На всякий случай объясню как добавлять свое кастомное имя шрифта — в поиске при выборе шрифта нужно просто набрать свое имя и затем нажать Enter (это имеется в подсказке, но кто же ее читает. ). Немножко путает первоначальное название поля — «поиск». Кто бы мог подумать, что туда можно вбить свое название шрифта и затем его использовать!

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

Лучше всего размещать шрифты в папке fonts в родительской папке yootheme_child.

Благо, есть сервисы, которые сильно упрощают процесс скачивания и получения нужных правил CSS. (например вот этот — https://google-webfonts-helper.herokuapp.com/fonts/)

Этот сервис как раз по умолчанию предполагает размещение шрифтов в папке fonts. Поэтому единственное, что потребуется подправить — наименование самого шрифта (вместо Roboto поставить Roboto local).

после смены получается

/* roboto-regular - latin */ @font-face < font-family: 'Roboto local'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v18-latin-regular.woff') format('woff'); >

Я надеюсь, что вы не забыли поставить галочку при выборе языка для шрифта?

Перекомпиляция less темы

На этом создание своей less темы можно считать оконченным. Нужно добиться перекомпиляции файла путем выбора другой темы и затем повторного выбора своей и последующего сохранения. К сожалению, на данный момент кнопки «компилировать» в теме пока нет и приходится немного извращаться.

Свои дополнения в созданный less файл можно добавлять в нужное вам место. Можно в конце или в начале (но после комментариев).

Туда же можно добавить определения своих локальных шрифтов.

Полезный ресурс для скачивания на свой компьютер выбранного вами шрифта из сервиса гугл — https://google-webfonts-helper.herokuapp.com/fonts/

P.S. Возможные трудности и пути их решения

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

1. Слишком короткая сессия в Joomla

В джумла по умолчанию предусмотрено, что если вы бездействуете более 15 минут — вас разлогинет. Причем, находясь в yootheme pro вы этого даже не заметите. Просто перестанет нажиматься кнопка «Сохранить» (или исчезнет).

Путь решения — я устанавливаю продолжительность сессии 55 минут.

2. Несовместимость с режимом вебвизора от Яндекс метрики

Если включен вебвизор в яндекс метрике, то yootheme pro может начать вести себя очень странно. Иногда выкидывает или делает еще какие-то странные вещи. Может быть это как-то починят, но пока было так.

Пути решения — я добавляют метрику на сайт в виду HTML модуля и публикую его в позиции debug. На время внесения изменений в yootheme pro модуль можно снять с публикации одной кнопкой.

Главное — не забыть потом включить назад 🙂

3. Плагин JL No Doubles ( https://joomline.ru/rasshirenija/plugin/jlnodubles.html ) не совместим с Yootheme Pro

Пути решения — опять же на время редактирования приходится отключать.

Автор вроде обещал что-то поправить, но пока что без движений.