WordPress自定义Courier Prime字体无法加载，求助排查问题

核心问题1：@font-face的src写法错误 #

你多次单独声明src属性，后面的声明会直接覆盖前面的，最终只有最后一个woff2格式的字体被识别——如果这个路径出错，浏览器就会 fallback 到系统默认的Menlo字体。正确写法是把多个格式的src用逗号分隔，按加载优先级从高到低排列（woff2体积最小，优先加载）：

@font-face {
    font-family: "Courier Prime";
    font-weight: normal;
    font-style: normal;
    src: url("fonts/Courier_Prime/CourierPrime-Regular.woff2") format("woff2"),
         url("fonts/Courier_Prime/CourierPrime-Regular.woff") format("woff"),
         url("fonts/Courier_Prime/CourierPrime-Regular.ttf") format("truetype");
}

核心问题2：字体文件路径可能不正确 #

WordPress主题里的相对路径容易踩坑，你需要确认：

• 字体文件是否确实放在主题根目录下的fonts/Courier_Prime/文件夹内（比如主题是twentytwentyfour，对应路径就是wp-content/themes/twentytwentyfour/fonts/Courier_Prime/）。
• 如果你的style.css不在主题根目录（比如放在css子文件夹里），相对路径要调整为../fonts/Courier_Prime/...（用../回到上一级目录）。

更稳妥的是用绝对路径：如果在functions.php里注册样式，可以借助WordPress函数生成主题目录的绝对URL：

// 在functions.php中注册自定义字体样式
function enqueue_custom_fonts() {
    wp_enqueue_style( 'custom-fonts', get_template_directory_uri() . '/custom-fonts.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_fonts' );

然后在custom-fonts.css里写：

@font-face {
    font-family: "Courier Prime";
    font-weight: normal;
    font-style: normal;
    src: url("<?php echo get_template_directory_uri(); ?>/fonts/Courier_Prime/CourierPrime-Regular.woff2") format("woff2"),
         url("<?php echo get_template_directory_uri(); ?>/fonts/Courier_Prime/CourierPrime-Regular.woff") format("woff"),
         url("<?php echo get_template_directory_uri(); ?>/fonts/Courier_Prime/CourierPrime-Regular.ttf") format("truetype");
}

（注意：直接在style.css里不能写PHP代码，必须保证相对路径完全正确）

其他排查步骤 #

1. 清除浏览器缓存：强制刷新页面（Windows按Ctrl+F5，Mac按Cmd+Shift+R），避免浏览器加载旧的缓存文件。
2. 用开发者工具验证：
   • 打开F12工具，找到应用.courier类的元素，查看「计算样式」里的font-family是否正确。
   • 切换到「网络」面板，筛选「字体」类型，检查字体文件请求是否返回404（如果是，说明路径肯定错了）。

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