Docusaurus自定义Montserrat字体仅正文生效、标题不生效问题

Docusaurus 基于 Infima 样式框架构建，默认预设了各级标题（h1~h6）的独立字体样式规则，这部分规则的选择器优先级高于你在:root选择器上设置的全局font-family属性，因此标题不会继承根元素的字体设置，才会出现正文生效、开发者工具里标题的Montserrat字体声明被删除线划掉的覆盖现象。

两种方案都可以实现全站点标题应用自定义字体，优先推荐第一种：

• 方案1：覆盖框架原生CSS变量（推荐，无优先级冲突）
  Infima 内置了专门控制全局字体、标题字体的CSS变量，不需要额外写高权重选择器强制覆盖，直接在现有:root配置块中补充对应变量声明即可，修改后的完整配置参考：

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
:root {
    --ifm-color-primary: #25c2a0;
    --ifm-color-primary-dark: #29784c;
    --ifm-color-primary-darker: #277148;
    --ifm-color-primary-darkest: #205d3b;
    --ifm-color-primary-light: #33925d;
    --ifm-color-primary-lighter: #359962;
    --ifm-color-primary-lightest: #3cad6e;
    --ifm-code-font-size: 95%;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
    /* 全局基础字体，控制正文、常规文本样式 */
    --ifm-font-family-base: "Montserrat", sans-serif;
    /* 标题专属字体变量，控制所有h1~h6标题样式 */
    --ifm-heading-font-family: var(--ifm-font-family-base);
}

这种方式是框架原生支持的配置逻辑，后续如果需要调整字体只需要修改变量值即可，维护成本最低。

• 方案2：高权重选择器强制覆盖
  如果不想修改CSS变量，也可以直接选中所有标题元素，通过提升样式优先级强制应用字体，在自定义CSS文件中追加如下代码即可：

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif !important;
}

注意：该方案使用!important强制覆盖默认规则，后续如果需要给特定位置的标题单独设置字体，需要写权重更高的规则才能生效，非特殊场景不优先使用。

内容的提问来源于stack exchange，提问作者darkshadowtrail