3

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: Image displaying desired outputs using CSS property font-display.

Improve this question

2 Answers 2

Reset to default
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

Improve this answer
3
  • I am interested in your approach. Could you explain what it does? My knowledge of Javascript is nil. As I read it, it checks whether a font is available, and if so, displays the contents. I agree with your choice of using an ID in this specific case (as it is likely to be relevant for only one or perhaps a handful of posts.
    – Canned Man
    May 16, 2021 at 22:07
  • 1
    @CannedMan ok, maybe it's not easily visible but FontFaceSet.check() is a link to documentation, that explains everything. And I used ID to keep PoC example very simple, you should use what is suitable for you.
    – user11153
    May 17, 2021 at 9:27
  • Yup, I did indeed not notice that it was a link; thanks for clarifying. In accordance with general accepted custom on the SE sites, you should explain that which is relevant from the provided documentation in your answer. Would you be able to incorporate that?
    – Canned Man
    May 17, 2021 at 12:01
0

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/

Improve this answer
1
  • Unless the custom is different on Graphic Design SE than the other sites, it is generally expected to use links as references, not as answers, so if you explain what your linked resource tells, I am sure you will get your answer upvoted.
    – Canned Man
    May 17, 2021 at 11:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.