Benutzerdefobene Schriftart für ein einzelnes Wort in einem Theme

Entwickler
1

Ich versuche, ein einzelnes Wort in einer bestimmten Schriftart in einer Komponente eines von uns verwendeten Themas zu erhalten – dies dient der Markenidentität.
Das betreffende Thema (Sublime Theme) hat eine Komponente discourse-search-banner.
Zu diesem Thema habe ich die Komponente Blippo-font hinzugefügt, in die ich die Schriftartdatei blippo-black.woff2 hochgeladen habe. Ich habe keine Änderungen am CSS/HTML vorgenommen.
Das Panel zeigt hier $blippo-black: blippo-black.woff2
Anschließend habe ich im discourse-search-banner-Komponente von Sublime Theme das gemeinsame CSS bearbeitet, um die Klasse blippo-black zu definieren:

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

Anschließend habe ich den Text für search_banner.headline innerhalb der discourse-search-banner-Komponente bearbeitet:

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

Beim Laden der Seite in einem Browser wird die neue Schriftart (blippo-black) nicht auf den Text innerhalb des zweiten Span-Tags angewendet, obwohl das Inspektionsfenster im Browserfenster anzeigt, dass der Text den Span-Tag darum hat:
<span class="ifutures">ifutures</span>
und dass das CSS übernommen wird:

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

Was mache ich falsch?
Vielen Dank!

1 „Gefällt mir“
2

Sie müssen auch die @font-face-Regel für die Schriftart definieren, z. B.:

Außerdem

Versuchen Sie, dies in der Komponente zu tun, zu der Sie die Schriftart hochgeladen haben, anstatt in der Suchkomponente. Ich denke, das ist der einzige Weg, wie es funktionieren würde, es sei denn, Sie haben die Schriftart direkt in die andere Komponente hochgeladen.

3 „Gefällt mir“