Estou tentando obter uma única palavra em uma fonte específica em um componente de um tema que usamos - isso é para fins de identidade da marca.
O tema em questão (Sublime Theme) tem um componente discourse-search-banner.
A este tema, adicionei o componente Blippo-font, onde fiz o upload do arquivo de fonte blippo-black.woff2. Não fiz nenhuma alteração no css/html aqui.
O painel aqui mostra $blippo-black: blippo-black.woff2
No componente discourse-search-banner do Sublime Theme, editei o css comum para definir a classe blippo-black:
.ifutures {
font-family: 'blippo-black';
}
Em seguida, editei o texto para search_banner.headline dentro do componente discourse-search-banner:
<span style="font-family:Poppins, Arial">Welcome to</span> <span class="ifutures">ifutures<span>!</b>
Ao carregar a página em um navegador, a nova fonte (blippo-black) não é aplicada ao texto dentro da segunda tag span, mesmo que o painel de inspeção na janela do navegador mostre que o texto tem a tag span ao redor dele:
<span>ifutures<span>
e que o css está sendo captado:
.ifutures {
font-family: "blippo-black";
}
O que estou fazendo de errado?
Obrigado!