Настраиваемый шрифт для одного слова в теме

Разработка
1

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

В рассматриваемой теме (Sublime Theme) есть компонент discourse-search-banner.

В эту тему я добавил компонент Blippo-font, куда загрузил файл шрифта blippo-black.woff2. Никаких изменений в CSS/HTML здесь я не вносил.

В этом панели отображается $blippo-black: blippo-black.woff2.

Затем в компоненте discourse-search-banner темы Sublime я отредактировал общий CSS, чтобы определить класс blippo-black:

.ifutures {
    font-family: 'blippo-black';
}

Далее я изменил текст для search_banner.headline внутри компонента discourse-search-banner:

<span style="font-family:Poppins, Arial">Welcome to</span> <span class="ifutures">ifutures<span>!</b>

При загрузке страницы в браузере новый шрифт (blippo-black) не применяется к тексту внутри второго тега <span>, хотя в панели инспектора браузера видно, что текст обернут в тег <span>:
<span class="ifutures">ifutures<span>
и что CSS подхватывается:

.ifutures {
   font-family: "blippo-black";
}

Что я делаю не так?

Спасибо!

2

Также необходимо определить @font-face для шрифта, например:

Кроме того,

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