替换Google Font为本地字体后前端字体显示异常求助

直接@import本地woff2文件是没用的——Google Font的@import链接其实帮你自动生成了@font-face规则，你下载字体文件后得自己补上这个声明，不然浏览器不知道这个woff2对应你指定的Shadows Into Light字体族。

按下面的步骤调整：

• 删掉你现在的本地字体@import语句，换成完整的@font-face声明：

@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/storefront-child/fonts/shadows-into-light-regular.woff2') format('woff2');
  font-display: swap; /* 和原Google Font的display=swap保持一致，不影响页面加载体验 */
}

• 检查字体文件路径：打开浏览器开发者工具的「网络」标签，刷新页面后看这个woff2文件是否能成功加载（没有404错误），如果路径错了，要对应调整url()里的地址。
• 清除缓存：包括WordPress的主题缓存、浏览器缓存，避免旧的CSS规则覆盖新设置。
• 确认标题的font-family设置不变：保持font-family: 'Shadows Into Light', cursive;即可。

这样调整后，浏览器就能正确识别并加载你本地的字体文件了。

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