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?