用CSS变量在WordPress（BeTheme）应用Adobe字体失败，求问题原因

核心问题 #

你的代码失效主要有两个原因：

• font简写属性的语法要求没满足：font是复合属性，必须包含字体大小和字体族这两个必填项，只给字体族和字重的话，浏览器无法识别这个简写规则。
• 先确认Adobe字体是否正确加载：如果站点里没正确嵌入Adobe字体的加载代码，就算CSS变量写对了，也会 fallback 到 sans-serif。

修正方案 #

方案1：拆分属性（推荐，更稳定） #

不用font简写，分别定义font-family和font-weight的变量，避免简写的语法限制：

:root {
  --futura-pt-bold: "futura-pt-bold", sans-serif;
  --ft-wt-7: 700;
}

/* 覆盖BeTheme默认样式，可根据需要调整选择器优先级 */
p, .mfn-text, .entry-content {
  font-family: var(--futura-pt-bold);
  font-weight: var(--ft-wt-7);
}

方案2：正确使用font简写 #

如果坚持用简写，必须补全必填的字体大小（可根据需求调整数值），同时遵循简写的顺序：

:root {
  /* font简写顺序：字重 字号/行高 字体族 */
  --fut-bld: 700 16px/1.5 "futura-pt-bold", sans-serif;
}

p {
  font: var(--fut-bld);
}

额外注意事项 #

• Adobe字体加载：在BeTheme的「主题设置 > 自定义代码 > 头部代码」里，添加Adobe Fonts提供的嵌入代码（类似<link rel="stylesheet" href="https://use.typekit.net/xxx.css">），确保字体能正常加载。
• 样式优先级：BeTheme的默认文本样式优先级可能较高，如果你的代码没生效，可以给选择器加更具体的前缀（比如.page-content p），或者临时用!important测试（不推荐长期使用）。

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