테마에서 특정 단어에 커스텀 폰트 적용하기

개발
1

특정 테마에서 사용되는 컴포넌트 내에서 특정 단어 하나를 원하는 폰트로 표시하려고 합니다. 이는 브랜드 아이덴티티를 위한 것입니다.

해당 테마(Sublime Theme)에는 discourse-search-banner라는 컴포넌트가 있습니다.

이 테마에 Blippo-font라는 컴포넌트를 추가하여 blippo-black.woff2 폰트 파일을 업로드했습니다. 여기서는 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>

브라우저에서 페이지를 로드하면 두 번째 span 태그 내부의 텍스트에는 새로운 폰트(blippo-black)가 적용되지 않습니다. 브라우저 창 내 검사 패널에서 해당 텍스트가 span 태그로 감싸여 있다는 것이 표시되는데도 그렇습니다:
<span class="ifutures">ifutures<span>
그리고 CSS가 적용되고 있음도 확인됩니다:

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

무엇이 잘못된 것일까요?

감사합니다!

2

글꼴에 대한 @font-face도 정의해야 합니다. 예:

그리고

검색 컴포넌트가 아니라 글꼴을 업로드한 컴포넌트에서 시도해 보세요. 글꼴을 다른 컴포넌트에 직접 업로드하지 않는 한, 그것이 작동하는 유일한 방법이라고 생각합니다.