将 Google 字体与 Shadow DOM 结合使用 [重复]

我正在尝试在内容脚本端的扩展中使用谷歌字体 - 我下载并从扩展目录加载的 Noto 字体可以工作（它也在 web_accessible_resources 中声明）并且在 ShadowDOM 中工作正常，但谷歌字体不能't

我将这种样式文本注入头部：

var styleNode = document.createElement("style");
styleNode.type = "text/css";
styleNode.textContent =
"@font-face { font-family: Noto Serif; src: url('" +
browser.extension.getURL("NotoSerifCJKjp-SemiBold.otf") +
"') format('opentype'); } @font-face { font-family: Poppins; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); }";
document.head.appendChild(styleNode);

我也尝试过放

@import url("https://fonts.googleapis.com/css?family=Poppins");

在 Shadow dom 风格中，但这也不起作用

添加字体作为链接有效，不知道为什么：

var linkNode = document.createElement("link"); 
linkNode.type = "text/css"; 
linkNode.rel = "stylesheet"; 
linkNode.href = "//fonts.googleapis.com/css?family=Poppins";
document.head.appendChild(linkNode);

也可以这样做：

<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">

as per Google Fonts 字体无法加载 https://stackoverflow.com/questions/17712027/google-fonts-font-doesnt-load