Police personnalisée pour un seul mot dans un thème

Dev
1

J’essaie d’obtenir un seul mot dans une police particulière dans un composant d’un thème que nous utilisons - ceci est à des fins d’identité de marque.

Le thème concerné (Sublime Theme) a un composant discourse-search-banner.

À ce thème, j’ai ajouté le composant Blippo-font où j’ai téléchargé le fichier de police blippo-black.woff2. Je n’ai apporté aucune modification au CSS/HTML ici.
Le panneau ici affiche $blippo-black: blippo-black.woff2

Dans le composant discourse-search-banner de Sublime Theme, j’ai ensuite modifié le CSS commun pour définir la classe blippo-black :

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

J’ai ensuite modifié le texte pour search_banner.headline dans le composant discourse-search-banner :

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

Lors du chargement de la page dans un navigateur, la nouvelle police (blippo-black) ne s’applique pas au texte à l’intérieur de la deuxième balise span, même si le volet d’inspection dans la fenêtre du navigateur montre que le texte a la balise span autour de lui :
<span class="ifutures">ifutures<span>
et que le CSS est bien pris en compte :

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

Qu’est-ce que je fais de mal ?

Merci !

1 « J'aime »
2

Vous devez également définir le @font-face pour la police, par exemple :

Aussi

Essayez de le faire sur le composant auquel vous avez téléchargé la police, plutôt que sur celui de recherche. Je pense que c’est la seule façon dont cela fonctionnerait, à moins que vous n’ayez téléchargé la police directement sur l’autre composant.

3 « J'aime »