font-face - 为什么这个 @import 规则对这个 Web 组件没有任何影响？

Question

const sheet = new CSSStyleSheet()
sheet.replace(`
  @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
  p {
    color: red;
    font-family: 'Roboto';
  }
`)
customElements.define('my-component',
  class extends HTMLElement {
    constructor() {
      super()
      const shadowRoot = this.attachShadow({
        mode: 'open'
      })
      shadowRoot.adoptedStyleSheets = [sheet]
      shadowRoot.innerHTML = '<p>my component</p>'
    }
  }
)

在这里查看：https ://jsfiddle.net/jdvivar/h1x2vs3u/

创建一个自定义标签my-component，附加一个影子根，并在其中复制采用的样式表。我认为它应该使用正确的字体呈现内容，但事实并非如此。仅应用颜色样式。你知道为什么吗？