打包的字体不会与@ font-face一起加载

Question

在Chrome扩展程序中，我将<div>注入到要使用扩展程序中包装的字体进行样式设置的页面中。

字体文件未下载，并已退回到字体堆栈中的serif选项。

是否可以通过影子DOM与我相关？

style.css：

@font-face {
    font-family: 'Poppins-Medium';  
    font-style: normal;
    font-weight: 500;
    src: url('chrome-extension://__MSG_@@extension_id__/poppins-medium.woff2') format('woff');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

#wrapper {
    font-family: 'Poppins-Medium', sans-serif;
}

content.js

var myDiv = document.createElement('div');
myDiv.setAttribute('id', 'myContainer');
myDiv.setAttribute('style', 'all: initial;');
document.body.appendChild(myDiv);

var shadow = document.querySelector('#myContainer').attachShadow({mode: 'open'});

shadow.innerHTML = `
    <div id="wrapper">
      <link rel="stylesheet" href="` + chrome.runtime.getURL('style.css') + `">
      <div>this text should be in poppins-medium</div>
    </div>
`;

manifest.json

{   
    "manifest_version": 2,
    "name": "My Extension", 
    "version": "1.0",
    "description": "Blah.", 
    "icons": {
        "128": "icon128.png"
    },
    "browser_action": {
        "default_title": "My extension"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "content_scripts": [
    {
        "run_at": "document_end",
        "matches": ["<all_urls>"],
        "js": ["content.js"]
    }],
    "web_accessible_resources": [
        "style.css",
        "poppins-medium.woff2"
    ]
}