Упакованный шрифт не загружается с @ font-face

В расширении Chrome я вставляю <div> на страницу, которую хочу стилизовать с помощью шрифта, упакованного в расширение.

Файл шрифта не загружается и возвращается к опции с засечками в стеке шрифтов.

Может ли это быть связано с тем, что я использую теневой 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"
    ]
}