How to load fallback font formats with FontFace API

Question

When using the FontFace API (not @fontface) is there a convenient way to pass multiple different font formats, like with providing multiple sources in @fontface?

Or alternatively, is there a convenient way to check what formats the browser using the FontFace API will accept, so I can provide the most ideal of several?

Answer 1

From what the current draft of the CSS Font Loading spec says, the FontFace API takes the same values as the corresponding @font-face descriptors. It means you can simply pass as the font data source whatever fallback string you’d use in your @font-face definition. It’s how WebKit handles it, anyway:

let fontFace = new FontFace("MyWebFont", "url('MyWebFont.woff2') format('woff2'), url('MyWebFont.woff') format('woff')");