Google WebFontLoaderを使用してURLでカスタムフォントを読み込む方法

Question

WebFontLoaderを使用してオンデマンドでフォント（.ttf、.otf）を実行時にロードする必要があります。

フォントごとにfontFamilyとurlのみがあります。

WebFont.load({ 
    custom: { 
     families: [ 
      'font-family-name' 
     ], 
     urls: [ 
      'path-to-css' 
     ] 
    } 
}); 

ファイルをフォントに.cssのファイルなしではなく、ダイレクトパスでそれを行う方法があります：WebFontLoaderのようなファイルを使用して.cssのフォントをロードするためのオプションを持っているよう

が見えますか？

フォントファイルを保存する外部サイトは使用しません。

Answer 1

私が見つけたフォントをロードして検出するためにロードする唯一の方法は、@font-faceの要素を内部に作成してDOMに追加することです。

let markup = [ 
     '@font-face {\n', 
     '\tfont-family: \'', font-family-name, '\';\n', 
     '\tfont-style: \'normal\';\n', 
     '\tfont-weight: \'normal\';\n', 
     '\tsrc: url(\'', font-file-url, '\');\n', 
     '}\n' 
    ].join(''); 
}); 

let style = document.createElement('style'); 
style.setAttribute('type', 'text/css'); 
style.innerHTML = markup; 

、その後、あなたがイベントをリッスンするWebFontLoaderを使用することができます。

WebFont.load({ 
    custom: { 
     families: [ 
      'font-family-name' 
     ], 
     active:() => { 
      //triggers when font has been loaded successfully 
     }, 
     inactive:() => { 
      //triggers when font loading failed 
     } 
    } 
});