Добавить пользовательский шрифт в мою тему через репозиторий ресурсов

[Joart]

Здравствуйте,
Я пытаюсь добавить пользовательский шрифт в свою тему, но у меня не получается… Я наверняка где-то ошибся, но не могу найти где.

• Я разрабатываю собственную тему, которую установил через GitHub.
• В репозитории assets я загрузил свои шрифты, которые не являются шрифтами Google:

• В файле about.json я импортировал файлы:

• В репозитории scss я создал семейства шрифтов:

Я также пробовал добавить: format(‘woff2’), но это тоже не сработало.

• И затем:

В итоге ничего не работает… Есть какие-нибудь идеи?

[pfaffman (Jay Pfaffman)]

Я не уверен, в чём может быть проблема. Посмотрите включение ресурсов (например, изображений, шрифтов) в темы и компоненты. Извините, если это не поможет.

[southpaw]

Привет, @Joart,

Возможно, я упрощаю, но я заметил, что в вашем фрагменте about.json путь к шрифтам указывает на папку assets, а в вашем CSS путь указывает на папку fonts. Вы уверены, что исходный путь в CSS верный?

[awesomerobot (Kris)]

@Southpaw

Вы уверены, что путь к источнику CSS верный?

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

@font-face {
   font-family: supply-light;
   src: url($supply-light);
}

Это подробно описано здесь: Include assets (e.g. images, fonts) in themes and components

[Joart]

Что ж, я попробовал, но это не работает

[pfaffman (Jay Pfaffman)]

Сложно догадаться, почему. Вы можете разместить свою тему на GitHub и предоставить ссылку на неё или опубликовать свой код здесь.

Вы следовали примеру, предоставленному @awesomerobot?

[southpaw]

Привет, @Joart,

Я немного поэкспериментировал с этим на относительно новом экземпляре Discourse и столкнулся с трудностями при использовании первых нескольких шрифтов. Я конвертировал их в формат .woff2 с помощью бесплатного онлайн-конвертера, и, возможно, он справился с этим не очень хорошо.

Когда я попробовал шрифт .otf, а затем ещё один .woff2, конвертированный более надёжным инструментом, мне удалось добавить пользовательский шрифт, следуя инструкциям из руководства, на которое ссылались @pfaffman и @awesomerobot.

На самом деле потребовалось всего два шага — загрузка файла через модальное окно «Добавить загрузку» и добавление только строк @font-face и body из примера SCSS в тему или компонент.

Если вы сможете предоставить нам больше деталей, а также поделиться своим кодом и шрифтами, мы обязательно поможем вам разобраться с этой проблемой.

[Joart]

О да, спасибо! Я попробовал формат ttf, и он работает!