How to import font file using JavaScript?

CSS has a @font-face rule which allows us to "use" custom fonts.

Does JavaSc开发者_JS百科ript have this functionality?

More specifically, is it possible to "use" custom fonts without using the CSS @font-face rule?

if you know CSS you can use document.write to append a style sheet dynamically... I guess that would count as using CSS, but it would work

There is no way to cause the browser to load a font from the network other than with a @font-face rule. You could theoretically create that @font-face rule from JavaScript without having to use document.write (or document.createElement("style") etc), if instead you used the CSS Object Model; but I wouldn't count on that to be implemented in any browser at the moment.

No. There's not. Javascript can manipulate the DOM, but it doesn't care about formatting.

There is an experimental technology "CSS Font Loading API" that allows to load and use font in javascript. Currently working in chrome and firefox.

fetch('/static/media/ProximaNova-Regular.otf')
        .then(resp => resp.arrayBuffer())
        .then(font => {
            const fontFace = new FontFace('Proxima-Nova', font);
            document.fonts.add(fontFace);
            document.body.style.fontFamily = '"Proxima-Nova", Arial';
        })

yes you can:

document.body.style.fontFamily = '...';

here is a fiddle: http://jsfiddle.net/maniator/QMZ8N/

this only adds a predefined font to an element.

This does NOT add a font style to the page. for that you might have to use CSS