主题中单个词的自定义字体

开发
1

我正在尝试在一个主题组件中以特定字体获取单个单词——这是出于品牌标识的目的。
相关主题（Sublime Theme）有一个组件 discourse-search-banner。
在此主题中，我添加了组件 Blippo-font，并上传了字体文件 blippo-black.woff2。我没有对 CSS/HTML 进行任何更改。
此处的面板显示 $blippo-black: blippo-black.woff2

然后，在 Sublime Theme 的 discourse-search-banner 组件中，我编辑了公共 CSS 来定义 blippo-black 类：

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

然后，我编辑了 discourse-search-banner 组件中 search_banner.headline 的文本：

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

在浏览器中加载页面时，新字体（blippo-black）未应用于第二个 span 标签内的文本，尽管浏览器窗口中的检查窗格显示文本带有 span 标签：
<span class="ifutures">ifutures</span>
并且 CSS 正在被拾取：

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

我哪里做错了？
谢谢！

1 个赞
2

您还必须为字体定义 @font-face，例如：

另外

尝试直接在您上传字体的组件上进行修改，而不是在搜索组件上。我认为这是唯一可行的方法，除非您直接将字体上传到另一个组件。

3 个赞