WordPress子主题中@font-face无法生效问题求助

一、先确认字体文件是否正常加载 #

打开浏览器开发者工具（F12）切换到「网络」面板，刷新页面后筛选「字体」类型：

• 若字体文件返回404：你当前用的../fonts/相对路径是错误的——子主题style.css和fonts文件夹同级，正确相对路径应为./fonts/；也可以直接用浏览器能访问的完整URL测试。
• 若字体文件返回200但未生效：检查响应头的Content-Type，woff2需为font/woff2、woff需为font/woff，类型不对的话要在.htaccess里添加配置：

  AddType font/woff2 .woff2
  AddType font/woff .woff
  

二、修正@font-face配置 #

1. 修复路径并规范字体权重 #

把相对路径改成同级目录的写法，同时给粗体字体设置正确的font-weight，方便后续调用：

@font-face {
    font-family: 'pp_gosha_sans';
    src: url('./fonts/ppgoshasans-bold-webfont.woff2') format('woff2'),
         url('./fonts/ppgoshasans-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'pp_gosha_sans';
    src: url('./fonts/ppgoshasans-regular-webfont.woff2') format('woff2'),
         url('./fonts/ppgoshasans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

这样后续调用时可以统一用font-family: 'pp_gosha_sans', sans-serif;，通过font-weight区分粗细，更规范。

2. 用WordPress函数确保路径绝对正确 #

避免相对路径踩坑，在子主题functions.php中添加代码（没有该文件就新建），强制用绝对路径加载CSS：

function enqueue_custom_font_styles() {
    wp_enqueue_style( 'child-theme-fonts', get_stylesheet_directory_uri() . '/style.css', array(), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_font_styles' );

三、破解主题样式覆盖问题 #

Manon主题的默认样式优先级可能比你的自定义CSS高，先临时用!important验证是否被覆盖：

body h1, body h2, body h3, body h4, body h5, body h6, body ul, body li, body a {
    font-family: 'pp_gosha_sans', sans-serif !important;
    font-weight: bold;
}

body p {
    font-family: 'pp_gosha_sans', sans-serif !important;
    font-weight: normal;
}

验证生效后，去掉!important，换成更具体的选择器（比如加上主题容器类名）来提升优先级。

四、排查其他隐性问题 #

• 清空浏览器缓存、WordPress缓存插件缓存，以及CDN缓存（如果启用）；
• 重新用FontSquirrel生成字体，勾选「Fix Vertical Metrics」选项，避免原字体文件损坏；
• 检查服务器权限，确保fonts文件夹和字体文件的权限为755（文件夹）/644（文件），避免服务器拒绝访问。

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