Chrome Extension MV3中本地字体无法加载问题求助

我正在尝试给Chrome Extension MV3添加本地字体，但一直不生效。已经在manifest.json里配置了web_accessible_resources权限，也试过在HTML顶部的style标签里加@font-face代码，都没成功。之前用import方式还被Chrome Store拒绝了。

content_script.js会在用户访问web.whatsapp页面时加载，并把代码追加到页面body里，相关代码如下：

content_script.js #

(function (){
    appendMainHtml = function(callbackFunction){
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {

                var div = document.createElement('div'),
                url = chrome.runtime.getURL('widget/').replace('img/IconStop.svg', '');
                div.setAttribute("id", "inserted-html-box");
                div.setAttribute("extension-url", url);

                div.innerHTML = this.responseText;
                var child = document.body.firstChild;                
                
                document.body.insertBefore(div, child);
                callbackFunction();
            }
        };
        xhttp.open("GET", chrome.runtime.getURL("/widget/index.html"), true);
        xhttp.send();
    },
    addScript = function(filePath){
        var script = document.createElement('script');
        script.setAttribute("src", chrome.runtime.getURL(filePath));
        document.head.appendChild(script);
    },
    addOnCallBack = function(){
        addScript("widget/style.css");
    },
    appendMainHtml(addOnCallBack);
})();

widget/style.css #

@font-face {
    font-family: "Poppins-Bold", sans-serif;;
    font-weight: 700;
    src: url("chrome-extension://{{id}}/widget/fonts/Poppins/Poppins-Bold.ttf") format('truetype');
    src: local('Poppins-Bold');
}
@font-face {
    font-family: "Poppins-SemiBold", sans-serif;;
    font-weight: 600;
    src: url("chrome-extension://{{id}}/widget/fonts/Poppins/Poppins-SemiBold.ttf") format('truetype');
    src: local('Poppins-SemiBold');
}
@font-face {
    font-family: "Poppins-Medium", sans-serif;
    font-weight: 500;
    src: url("chrome-extension://{{id}}/widget/fonts/Poppins/Poppins-Medium.ttf") format('truetype');
    src: local('Poppins-Medium');
}
@font-face {
    font-family: "Poppins-Regular", sans-serif;;
    font-weight: 400;
    src: url("chrome-extension://{{id}}/widget/fonts/Poppins/Poppins-Regular.ttf") format('truetype');
    src: local('Poppins-Regular');
}
.panel-inputTitle {
    font-family: "Poppins-Medium", sans-serif;
    font-size: 15px;
    margin-bottom: 7px;
    line-height: 24px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
}

manifest.json #

"web_accessible_resources": [
        {
            "resources": [
                "widget/*.html",
                "*.js",
                "widget/img/*",
                "widget/fonts/*.ttf"
            ],
            "matches": ["<all_urls>"]
        }
    ],

错误点及修正方案 #

1. @font-face语法错误

   • font-family里额外加了, sans-serif，这会导致字体名称识别异常，应该把sans-serif作为 fallback 放在使用字体的地方（比如.panel-inputTitle的font-family）。
   • 重复定义src属性，第二个src会直接覆盖第一个，导致远程字体路径失效。正确写法是合并src，优先使用本地字体，本地没有再加载扩展内的字体：

     @font-face {
         font-family: "Poppins-Bold";
         font-weight: 700;
         src: local('Poppins-Bold'), 
              url("chrome-extension://__MSG_@@extension_id__/widget/fonts/Poppins/Poppins-Bold.ttf") format('truetype');
         font-display: swap; /* 可选，提升页面加载体验 */
     }
     

   其他字体规则按此格式修正。

2. 扩展ID占位符错误
   代码里的{{id}}不是Chrome扩展的合法占位符，应该用__MSG_@@extension_id__自动获取扩展ID，或者通过chrome.runtime.getURL动态生成字体路径后注入到样式中。

3. 资源匹配路径不全
   manifest里的widget/fonts/*.ttf只匹配widget/fonts根目录下的字体文件，但你的字体实际在widget/fonts/Poppins/子目录，需要改成widget/fonts/**/*.ttf来匹配所有子目录下的字体。

4. 字体文件路径验证
   确认widget/fonts/Poppins/目录下的字体文件名和代码里的完全一致（注意大小写），文件没有缺失或损坏。

内容的提问来源于stack exchange，提问作者Guilherme Roque de Souza