Is there a way to hide the text if the font is not available?

Question

I would like to write graceful and humiliating code that uses glyph Webdings. Webdings is presumably one of those fonts that is universally available across platforms , but I don't want the browser to display a character in its standard font if, for some strange reason, Webdings does not exist.

Is there any way to do this?

Answer 1

As I said in the comment:

Instead, you should use @font-face to insert a fallback font. It's a lot better than hiding text, and it works in all browsers. "

I prefer to use the Font Squirrel Generator to handle @font-face . This makes it very easy.

Answer 2

You can do something similar with jQuery:

 $('p').each(function(){ var s = $(this).css('font-family'); if(s != "verdana"){ $(this).hide(); } }); 

EXAMPLE: http://jsfiddle.net/jasongennaro/GXjvK/

So you are checking if there is a font for the element. If it is not, you are hiding it.

Answer 3

Only Flash allows you to determine which fonts are installed on your computer. A blog is posted there to show how to get a list of fonts in Flash and pass that list to JavaScript. Once you have this in JavaScript, it should be easy to hide / show the text:

http://rel.me/2008/06/26/font-detection-with-javascript-and-flash/

Answer 4

There is no native way to check font availability in JavaScript.

However, as lalit understood, since "each character is displayed differently in different fonts, different fonts will have different widths and heights for the same character string of the same font size."

He wrote a good article and created a decent piece of code to do just that: http://www.lalit.org/lab/javascript-css-font-detect/

Answer 5

You can use the CSS3 property so that the font on your website means that everyone with a CSS3 compatible web browser will see the “text” as you wish.

 @font-face { font-family: myFirstFont; /* in your case webdings */ src: url('Sansation_Light.ttf'), url('Sansation_Light.eot') format("opentype"); /* IE */ } 

My only concern is now with copyrights, I don’t know if you must have rights to this font in order to be able to use it this way ...