Как загрузить пользовательские шрифты по URL с помощью Google WebFontLoader

Question

Мне нужно загрузить шрифты (.ttf, .otf) во время выполнения по требованию с помощью WebFontLoader.

Для каждого шрифта есть только fontFamily и url.

Похоже, в WebFontLoader есть опция загрузки шрифтов с использованием файлов.css, таких как:

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

Есть ли способ сделать это без файла.css, но с прямым путем к файлу шрифта?

Я не хотел бы использовать какие-либо внешние сайты для хранения файлов шрифтов.

Answer 1

Единственный возможный способ загрузки, чтобы загрузить и обнаружить загруженный шрифт, который я нашел, это создать <style> элемент с @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
        }
    }
});