Can you force text to not display if font is not loaded?

Question

I am using a custom font to display some text at the beginning of my blog post. What I desire, is for the text to display only if the font has been installed by the user. Here is my first attempt:

<h4>An interesting numbering system<span style="font-family: 'Tolvtalsystem';
font-display: block">: &#x2474; &#x2475; &#x2476; &#x2477; &#x2478; &#x2479;
&#x247a; &#x247b; &#x247c; &#x247d; &#x247e; &#x247f;</span></h4>

However, reading closer on how font-display works, it appears to be that all the options always fall back to a default font; the various settings only instruct the browser on how long it takes and how it performs the check. Therefore, is there a way to use font-display (or some other CSS-trick) so that whatever is within the tag is displayed only if the font successfully loads?

Here is an image displaying the desired result:

Answer 1

You can use experimental FontFaceSet.check():

returns a Boolean - whether all fonts in the given font list have been loaded and are available.

Example implementation

<h4>An interesting numbering system<span id="symbols" style="font-family: 
'Tolvtalsystem';
 font-display: block; display: none;">: &#x2474; &#x2475; &#x2476; &#x2477; 
 &#x2478; &#x2479;
 &#x247a; &#x247b; &#x247c; &#x247d; &#x247e; &#x247f;</span></h4>
<script>
if (document.fonts.check("12px Tolvtalsystem")) {
 document.getElementById("symbols").style.display = "inline";
}
</script>

Works on everything except dead Internet Explorer.

Source: MDN documentation

Answer 2

You need to use multiple font styles as there might be multiple cases of fonts in browser or system. This article might be a helpful resource for you : https://www.geeksforgeeks.org/how-to-add-multiple-font-files-for-the-same-font/