How to check if a platform supports FontFace API?

Question

Can I check if a platform supports the FontFace API as below?

if(window.FontFace || window.webkitFontFace) {
     //...
}

Or should not I check for the existence of "window.webkitFontFace"?

Note: I am wondering if it can support Javascript's FontFace API and not CSS's @font-face, although the FontFace API uses the CSS @font-face.

`@font-face` is different from FontFace, not really, but a platform can support `@font-face` CSS and not Javascript API FontFace? — PerduGames, Oct 12 '18 at 12:29
If `FontFace` is not supported, then it (normally) is `undefined`. The check for `webkitFontFace` serves no purpose though, so I'd remove that part. — user247702, Oct 12 '18 at 12:40
@Stijn Okay, thank you, create an answer, which will be much better than the mistake of the answer below. Hes do not read the question right and are already marked as duplicate, there should be a penalty for this precipitation too, because it always happens, too boring. — PerduGames, Oct 12 '18 at 12:49

score 3 · Accepted Answer · answered Oct 12 '18 at 12:53

When FontFace is not supported, it is undefined (unless custom JS sets the window.FontFace variable for some reason). So the first part of your proposed code is fine. Checking for webkitFontFace serves no purpose and can be removed.

if (window.FontFace) {
    console.log("supported");
} else {
    console.log("not supported");
}

The code above returns supported on the latest Firefox, and it returns unsupported on the latest Internet Explorer.

How to check if a platform supports FontFace API?

1 Answers1