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">: ⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿</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: