Custom font for single word in a theme

Dev
1

I am trying to get a single word in a particular font in a component of a theme we use - this is for brand identity purposes.

The theme concerned (Sublime Theme) has a component discourse-search-banner.

To this theme I have added the component Blippo-font where I uploaded the font file blippo-black.woff2. I did not make any changes to the css/html here.
The panel here shows $blippo-black: blippo-black.woff2

In the discourse-search-banner component of Sublime Theme I then edited the common css to define the class blippo-black:

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

I then edited the text for search_banner.headline within the discourse-search-banner component:

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

When loading the page in a browser, the new font (blippo-black) does not get applied to the text within the second span tag, even though the inspection pane in the browser window shows that the text has the span tag round it:
<span class="ifutures">ifutures<span>
and that the css is being picked up:

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

What am I doing wrong?

Thank you!

1 Like
2

You have to also define the @font-face for the font, e.g:

Also

Try doing it on the component that you uploaded the font to, rather than the search one. I think that’s the only way it’d work, unless you uploaded the font to the other component directly.

3 Likes