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

Question

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

すべてのフォントには fontFamily と url しかありません。

WebFontLoader には、次のような .css ファイルを使用してフォントをロードするオプションがあるようです。

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

.css ファイルを使用せずにフォント ファイルへの直接パスを使用する方法はありますか?

フォント ファイルを保存するために外部サイトを使用したくありません。

Answer 1

The only possible way to load to load and detect that font has been loaded that I found is to create <style> element with @font-face inside and add it to the 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;

and then you can use WebFontLoader to listen for events:

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