Carattere personalizzato per una singola parola in un tema

Sviluppatore
1

Sto cercando di ottenere una singola parola in un particolare font in un componente di un tema che utilizziamo, a fini di identitĂ  del marchio.

Il tema in questione (Sublime Theme) ha un componente discourse-search-banner.

A questo tema ho aggiunto il componente Blippo-font dove ho caricato il file del font blippo-black.woff2. Non ho apportato modifiche al css/html qui.
Il pannello qui mostra $blippo-black: blippo-black.woff2

Nel componente discourse-search-banner di Sublime Theme ho quindi modificato il css comune per definire la classe blippo-black:

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

Ho quindi modificato il testo per search_banner.headline all’interno del componente discourse-search-banner:

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

Quando carico la pagina in un browser, il nuovo font (blippo-black) non viene applicato al testo all’interno del secondo tag span, anche se il pannello di ispezione nella finestra del browser mostra che il testo ha il tag span intorno ad esso:

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

e che il css viene rilevato:

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

Cosa sto sbagliando?

Grazie!

1 Mi Piace
2

Devi anche definire @font-face per il font, ad esempio:

Inoltre

Prova a farlo sul componente a cui hai caricato il font, piuttosto che su quello di ricerca. Penso che sia l’unico modo in cui funzionerebbe, a meno che tu non abbia caricato il font direttamente sull’altro componente.

3 Mi Piace