クロムエクステンションでWebfontが動作しない

Question

クロムエクステンションでwebfontを使用するチュートリアルはほぼすべて行ってきましたが、どれも私のために働いていませんでしたが、それでも同じ醜いフォントが続いています。

は私がassets/fonts/

下のzip（https://fonts.google.com/specimen/Raleway?selection.family=Raleway）と保存されたRaleway-Regular.ttfとしてこのフォントをダウンロードして、私はまたweb_accessible_resourcesにファイルを追加しました。私はトップ

@font-face { 
    font-family: 'UniqueNameFont'; 
    font-style: normal; 
    font-weight: 700; 
    src: url('chrome-extension://<id_hidden>/assets/fonts/Raleway-Regular.ttf'); 
} 

* { 
    font-family: 'UniqueNameFont'; 
    box-sizing: border-box; 
} 

内のファイルへのパスが正しい次のコードを持っているのstyle.cssで

"web_accessible_resources": [ 
    "assets/fonts/Raleway-Regular.ttf" 
] 

、私がチェックしました。また、コンソールログにエラーはありません。

私のエクステンションにはシャドウドームがあり、そこにエクステンションを保持して、次にstyle.cssファイルとhtmlを動的に追加します。このように..

フォントフェイスを除くすべてのスタイリングが動作します。私はそれがコンテンツを動的に追加することと関係しているかもしれないと推測していますが、要素のスタイリングがうまいので、それは非常に奇妙です。

Googleフォントで提供されている@importを試してみましたが、[ネットワーク]タブでファイルが読み込まれていることがわかりましたが、なんらかの理由で何も影響しません。

Answer 1

Google Web Font Loaderライブラリを使用したときに機能しているようですが、かなり簡単です。

var gwebfont = document.createElement("script"); 
    gwebfont.src = "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"; 

    var callback = function(){ 
     var s = document.createElement('script'); 
     s.type = 'text/javascript'; 
     var code = "WebFont.load({google: { families: ['Open Sans', 'Open Sans:light', 'Open Sans:semi-bold', 'Open Sans:bold'] } });"; 
     try { 
      s.appendChild(document.createTextNode(code)); 
      shadow.appendChild(s); 
     } catch (e) { 
      s.text = code; 
      shadow.appendChild(s); 
     } 
    } 
    gwebfont.onload = callback; 
    shadow.appendChild(gwebfont); 

そして、あなたは、単にあなたのスタイルシートでフォントファミリを追加

* { 
    font-family: 'Open Sans', sans-serif; 
}