Trouble Loading Custom Font Into Shadow DOM in my Chrome Extension

[lancesnider]

I'm having trouble loading my custom font into my Chrome Extension.

// index.js
<root.div>
  <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
  <App />
</root.div>

@font-face {
    font-family: 'defaultText';
    src: url('chrome-extension://' + $extensionId + '/Inter-Regular.woff2')
        format('woff2'),
      url('chrome-extension://' + $extensionId + '/Inter-Regular.woff')
        format('woff');
  }

.some-class {
  // I set the fallback font to serif so it's easy to catch
  font-family: 'defaultText', serif;
}

Here's the style tag that gets put inside my shadow. I've tested those urls and the font is there.

If I change <root.div> to <div> the fonts load properly.

Thanks!