テーマで一単語にカスタムフォント

開発
1

テーマのコンポーネントで特定のフォントの単語を取得しようとしています。これはブランドアイデンティティの目的のためです。

関連するテーマ（Sublime Theme）には、discourse-search-banner というコンポーネントがあります。

このテーマに、フォントファイル blippo-black.woff2 をアップロードした Blippo-font コンポーネントを追加しました。CSS/HTMLには何も変更を加えていません。
ここのパネルには $blippo-black: blippo-black.woff2 と表示されます。

次に、Sublime Theme の discourse-search-banner コンポーネントの共通CSSを編集して、blippo-black クラスを定義しました。

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

その後、discourse-search-banner コンポーネント内の search_banner.headline のテキストを編集しました。

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

ブラウザでページを読み込むと、新しいフォント（blippo-black）が2番目のspanタグ内のテキストに適用されません。ブラウザのインスペクタペインには、テキストがspanタグで囲まれていることが表示されていてもです。

<span class="ifutures">ifutures</span>

そして、CSSが認識されていることも表示されています。

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

何が間違っていますか？

ありがとうございます！

「いいね！」 1
2

フォントの @font-face も定義する必要があります。例：

また、

フォントをアップロードしたコンポーネントで試してみてください。検索コンポーネントではなく。フォントを直接別のコンポーネントにアップロードした場合を除き、それが唯一の方法だと思います。

「いいね！」 3