WordPress自定义/Google阿拉伯字体不生效问题求助

我在WordPress中尝试安装自定义字体（kanun_arlt系列）及Google Fonts的Vazirmatn字体，但字体完全没有生效。以下是当前使用的代码、显示效果截图：

所用代码 #

CSS代码

/*this is google font*/
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700&display=swap');

/* this is custom font */
@font-face {
    font-family: 'kanun_arltmedium';
    font-weight: 500;
    font-style: normal;
    src: url('webfonts/kanun_arlt-medium-webfont.woff2') format('woff2'), url('webfonts/kanun_arlt-medium-webfont.woff') format('woff'), url('webfonts/kanun-arlt-medium.ttf') format('truetype');
}
@font-face {
    font-family: 'kanun_arltregular';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('webfonts/kanun_arlt-regular-webfont.woff2') format('woff2'), url('webfonts/kanun_arlt-regular-webfont.woff') format('woff'), url('webfonts/kanun-arlt-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'kanun_arltbold';
    font-style: normal;
    font-weight: bold;
    font-display: auto;
    src: url('webfonts/kanun_arlt-bold-webfont.woff2') format('woff2'), url('webfonts/kanun_arlt-bold-webfont.woff') format('woff'), url('webfonts/kanun-arlt-bold.ttf') format('truetype');
}

/* End Custom Fonts CSS */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] span.elementor-heading-title.elementor-size-default, h1 {
    font-family: 'Vazirmatn', sans-serif !important;
}

HTML示例

<h1>مرحباً بكم في ربع قرن للموسيقى</h1>

显示效果截图 #

• 当前显示效果：
• 预期显示效果：
• 相关设置截图：

排查与解决步骤 #

1. 检查自定义字体文件路径

@font-face中使用的webfonts/是相对路径，需确认路径正确性：

• 若CSS文件放在主题根目录，webfonts文件夹需与CSS文件同级
• 打开浏览器开发者工具（F12）的「网络」标签，刷新页面查看字体文件是否返回404，若404则修正为绝对路径（比如/wp-content/themes/你的主题名/webfonts/kanun_arlt-regular-webfont.woff2）

2. 规范@font-face定义

当前自定义字体的font-family命名分散，建议统一命名为kanun_arlt，通过font-weight区分字重：

@font-face {
    font-family: 'kanun_arlt';
    font-weight: 400; /* regular */
    font-style: normal;
    src: url('webfonts/kanun_arlt-regular-webfont.woff2') format('woff2'),
         url('webfonts/kanun_arlt-regular-webfont.woff') format('woff'),
         url('webfonts/kanun-arlt-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'kanun_arlt';
    font-weight: 500; /* medium */
    font-style: normal;
    src: url('webfonts/kanun_arlt-medium-webfont.woff2') format('woff2'),
         url('webfonts/kanun_arlt-medium-webfont.woff') format('woff'),
         url('webfonts/kanun-arlt-medium.ttf') format('truetype');
}
@font-face {
    font-family: 'kanun_arlt';
    font-weight: 700; /* bold */
    font-style: normal;
    src: url('webfonts/kanun_arlt-bold-webfont.woff2') format('woff2'),
         url('webfonts/kanun_arlt-bold-webfont.woff') format('woff'),
         url('webfonts/kanun-arlt-bold.ttf') format('truetype');
}

后续使用时只需指定font-family: 'kanun_arlt'，配合font-weight即可调用对应字重。

3. 强化CSS选择器优先级

当前选择器可能优先级不足，被主题或插件的样式覆盖：

• 用开发者工具选中目标元素，查看「样式」标签中生效的字体规则，找到优先级更高的选择器
• 优化选择器，提升优先级：

/* 强化Vazirmatn字体的优先级 */
body [dir="rtl"] h1,
body h1,
.elementor [dir="rtl"] .elementor-heading-title.elementor-size-default {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* 调用kanun_arlt字体示例 */
body [dir="rtl"] p,
body p {
    font-family: 'kanun_arlt', sans-serif !important;
    font-weight: 400;
}

4. 检查主题/插件设置冲突

• 部分主题或Elementor这类页面构建器自带全局字体设置，可能覆盖自定义CSS，需在主题设置或Elementor字体设置中，将对应字体设为「自定义」或直接选择你添加的字体
• 清除WordPress缓存和浏览器缓存，确保新CSS规则生效

5. 验证Google Fonts加载

若@import未生效，改用<link>标签在主题header.php中直接引入：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700&display=swap">

同时在开发者工具「网络」标签确认fonts.googleapis.com资源是否加载成功。

内容的提问来源于stack exchange，提问作者Salman Khan Sohoo