Search code examples
javascriptcssfonts

What does the message "Request for font "Noto Sans" blocked at visibility level 1 (requires 3) - node.js" implies and how to prevent it?

My website always displays this warning in the console :

"Request for font "Noto Sans" blocked at visibility level 1 (requires 3) - node.js"

Noto Sans is not loaded as a file by the website, it is only used as a backup font if other fonts do not display. Yet it is the only backup font where I get this warning.

What does this message mean and how to eventually prevent it ?

This is the full code of the page were the problem figures:

<style>
.addFont {
  font-family: 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
    'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
</style>

<span class="addFont">Text</span>

Note: these fonts & fallback fonts are initially from the TailwindCSS default "font-sans" class.

Solution

  • Simply removing the 'Noto Sans' and 'Noto Color Emoji' fallback fonts (in my case in TailwindCSS "font-sans") solved the problem.

    It seems that the font was blocked by Firefox for preventing fingerprinting by installed fonts, as pointed out by @Christopher in comments.