Packaged font doesn't load with #font-face - css

Question

In a Chrome extension, I'm injecting a <div> into a page which I want to style with a font that's packaged in the extension.
The font file isn't being downloaded, and is falling back to the serif option in the font stack.
Could it be related to me using a shadow 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"
]
}