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

**URL:** <https://meta.discourse.org/t/custom-font-for-single-word-in-a-theme/326527>\
**Category:** Development\
**Created:** [2024 年 9 月 14 日午後 8:42 UTC](https://meta.discourse.org/t/custom-font-for-single-word-in-a-theme/326527 "2024-09-14T20:42:34Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![PatrickF](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickf/32/485193_2.png) [@PatrickF](https://meta.discourse.org/u/PatrickF)\
**Post date:** [2024 年 9 月 14 日午後 8:42 UTC](https://meta.discourse.org/t/custom-font-for-single-word-in-a-theme/326527/1 "2024-09-14T20:42:34Z")

</div>

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

関連するテーマ（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 クラスを定義しました。

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

```

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

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

```

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

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

```

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

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

```

何が間違っていますか？

ありがとうございます！

---

_[View the full topic](https://meta.discourse.org/t/custom-font-for-single-word-in-a-theme/326527)._