Search code examples
javascriptfontsfont-face

check font is loaded with document.fonts.check and it always return true

I'm trying to check if certain font is loaded with the FontFaceSet#check() API but it always returns true to me, no matter what random stuff I put.
I tried in both Chrome and Safari, with the same result. Here are the results in my console:
Screenchot of a web page with the dev-tools opened showing various attempts to use document.fonts.check() with seemingly non existant font values, like "1px tst", but returning true nonetheless

Am I using this API wrongly?

I tried to google this issue and the API usage without any luck.
I expected document.fonts.check() would false if the font doesn't exist / is not loaded.

Solution

  • This is indeed the expected behavior, FontFaceSet cannot be used to determine if a font is available or not.

    The description from the MDN article you linked to says

    The check() method of the FontFaceSet returns true if you can render some text using the given font specification without attempting to use any fonts in this FontFaceSet that are not yet fully loaded.

    And that's all it does: It will tell you if when rendering the text the browser will have to load one of the fonts that are already registered in the FontFaceSet or not.
    In the case of font-families that haven't been registered in the FontFaceSet, the browser will not load any new font because that font doesn't exists to begin with, and thus .check() will return true.

    The MDN article even has a paragraph about that:

    Nonexistent fonts

    If we specify a font that is not in the FontFaceSet and is not a system font, check() returns true, because in this situation we will not rely on any fonts from the set: