WordPress主题添加Open Dyslexic字体失败，求排查解决

核心问题1：CSS文件中嵌入PHP代码无法解析 #

你的fonts.css是纯CSS文件，服务器不会自动解析其中的PHP标签（<?php ... ?>），导致字体文件的URL变成原始PHP代码文本，浏览器根本无法定位到字体文件。

修复方法：

• 方案一：改用相对路径。如果fonts.css在主题的/css/目录，字体文件在/fonts/目录，直接用相对路径替代PHP代码：

@font-face {
    font-family: 'Open Dyslexic';
    src: url('../fonts/opendyslexic/compiled/OpenDyslexic-Regular.woff2') format('woff2'),
         url('../fonts/opendyslexic/compiled/OpenDyslexic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 其他字重的@font-face规则同理修改路径 */

• 方案二：将@font-face规则移到PHP文件中输出，比如整合到functions.php的themename_dynamic_styles函数里，利用PHP动态生成正确的URL。

核心问题2：URL路径存在多余空格 #

部分@font-face规则的URL中存在多余空格，例如：

url('<?php echo get_template_directory_uri(); ?> /fonts/...')

?>后的空格会让路径变成http://你的站点域名/ /fonts/...，导致路径无效。

修复方法：
删除路径中的所有多余空格，确保URL拼接连续：

url('<?php echo get_template_directory_uri(); ?>/fonts/...')

问题3：@font-face规则错误放置且重复 #

你在customizer.php中也定义了@font-face规则，这是错误的——customizer.php用于定义定制器选项逻辑，不属于CSS代码的存放位置，这部分规则不仅无效，还会造成代码冗余。

修复方法：
删除customizer.php中的所有@font-face代码，只保留定制器相关的PHP逻辑。

问题4：动态CSS中字体名未加引号 #

当你在定制器中选择"Open Dyslexic"时，动态输出的CSS会是：

body {
    font-family: Open Dyslexic, sans-serif;
}

字体名包含空格，必须用引号括起来，否则浏览器会将其解析为多个字体名称，导致无法正确识别目标字体。

修复方法：
修改themename_dynamic_styles函数中的font-family输出，给字体名添加引号：

font-family: "<?php echo esc_attr(get_theme_mod('paragraph_font', 'Arial')); ?>", sans-serif;

标题字体如果需要支持带空格的字体名，也需要做相同处理。

额外验证步骤 #

1. 打开浏览器开发者工具（F12），切换到网络标签，刷新页面查看字体文件的请求状态：
   • 若显示404，说明路径仍错误，检查文件实际位置与URL是否匹配；
   • 若显示200，切换到元素标签，确认目标元素的font-family是否正确应用，未被其他样式覆盖。
2. 确保字体文件的服务器权限正确（一般设置为644），保证服务器可以读取这些文件。

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