WordPress克隆主题新字体不显示问题排查求助

我克隆了WordPress模板主题用于测试新字体，但新的Metropolis系列字体无法正常显示。已完成以下操作：

• 移除测试主题fonts文件夹内原有.woff字体文件，上传新的Metropolis系列.woff字体文件
• 更新html与body的font-family属性
• 未改动fonts文件夹结构，includes.php也无字体相关配置项
• 直接访问字体文件链接可正常下载

以下是相关代码，请求排查故障原因：

当前正常显示字体的@font-face代码 #

@font-face {
    font-family: 'Gotham Book';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Book'), url('../fonts/GothamBook.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Book Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Book Italic'), url('../fonts/GothamBookItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Light'), url('../fonts/GothamLight.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Light Italic'), url('../fonts/GothamLightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Medium'), url('../fonts/GothamMedium.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Medium'), url('../fonts/GothamMedium_1.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Medium Italic'), url('../fonts/GothamMediumItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Bold'), url('../fonts/GothamBold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Bold'), url('../fonts/Gotham-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Bold Italic'), url('../fonts/GothamBoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Black Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Black Regular'), url('../fonts/Gotham-Black.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Light Regular'), url('../fonts/Gotham-Light.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Thin Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Thin Regular'), url('../fonts/Gotham-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Gotham XLight Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham XLight Regular'), url('../fonts/Gotham-XLight.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Book Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Book Italic'), url('../fonts/Gotham-BookItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Thin Italic'), url('../fonts/Gotham-ThinItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Ultra Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham Ultra Italic'), url('../fonts/Gotham-UltraItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham XLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gotham XLight Italic'), url('../fonts/Gotham-XLightItalic.woff') format('woff');
}

测试主题未显示的新字体@font-face代码 #

@font-face {
    font-family: 'Metropolis Black';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Black'), url('../fonts/Metropolis-Black.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Black Italic'), url('../fonts/Metropolis-BlackItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Bold'), url('../fonts/Metropolis-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Bold Italic'), url('../fonts/Metropolis-BoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Extra Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Bold'), url('../fonts/Metropolis-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Extra Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Bold Italic'), url('../fonts/Metropolis-ExtraBoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Extra Light';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Light'), url('../fonts/Metropolis-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Extra Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Light Italic'), url('../fonts/Metropolis-ExtraLightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Light';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Light'), url('../fonts/Metropolis-Light.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Light Italic'), url('../fonts/Metropolis-LightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Medium'), url('../fonts/Metropolis-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Medium Italic'), url('../fonts/Metropolis-MediumItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Regular'), url('../fonts/Metropolis-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Regular Italic'), url('../fonts/Metropolis-RegularItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Semi Bold'), url('../fonts/Metropolis-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Semi Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Semi Bold Italic'), url('../fonts/Metropolis-SemiBoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Thin'), url('../fonts/Metropolis-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Thin Italic'), url('../fonts/Metropolis-ThinItalic.woff') format('woff');
}

当前主题html、body字体配置 #

html, body {
    font-family:"Gotham A", "Gotham B", Helvetica, Arial;
    -webkit-font-smoothing: antialiased;
    font-weight:$medium;
    color:$color-text;
    overflow-x: hidden;
}

测试主题html、body字体配置 #

html, body {
    font-family: 'Metropolis Regular', Helvetica, Arial;
    -webkit-font-smoothing: antialiased;
    font-weight:$medium;
    color:$color-text;
    overflow-x: hidden;
}

故障原因排查方向 #

1. 字体权重不匹配
   测试主题html/body配置中使用了font-weight:$medium变量，但Metropolis Regular的@font-face声明为font-weight: normal。如果$medium对应500（常规medium权重），而Metropolis Medium的font-family是独立的'Metropolis Medium'，浏览器会因找不到对应权重的字体而降级到后备字体。
   解决：要么将html/body的font-weight改为normal，要么给'Metropolis Regular'添加font-weight: 400，给'Metropolis Medium'添加font-weight: 500，确保权重对应。

2. @font-face命名规范问题
   当前Metropolis的每个字重都用独立的font-family名称，浏览器无法根据font-weight自动匹配。建议统一font-family名称，用权重区分：

   @font-face {
       font-family: 'Metropolis';
       font-style: normal;
       font-weight: 400;
       src: local('Metropolis Regular'), url('../fonts/Metropolis-Regular.woff') format('woff');
   }
   @font-face {
       font-family: 'Metropolis';
       font-style: normal;
       font-weight: 500;
       src: local('Metropolis Medium'), url('../fonts/Metropolis-Medium.woff') format('woff');
   }
   /* 其他字重以此类推 */
   

   之后将html/body的font-family改为'Metropolis', Helvetica, Arial;，浏览器会自动匹配对应权重的字体。

3. CSS缓存问题
   浏览器可能缓存了旧CSS文件，强制刷新（Ctrl+F5）或给CSS文件加版本号（如style.css?v=1.0.1）可解决。

4. 文件名大小写问题
   若服务器是Linux系统，文件名区分大小写，需确保@font-face中的文件名与实际上传的完全一致。

5. 本地字体干扰
   local('Metropolis Regular')会优先调用本地同名字体，若本地字体存在异常，可移除local声明，强制加载服务器字体：

   src: url('../fonts/Metropolis-Regular.woff') format('woff');
   

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