CODEWITHSUNDEEP
htmlcssfonts
Isaac Lubow
Isaac Lubow

Reputation: 3573

Is there a way to hide text if a font is unavailable?

I'd like to write gracefully-degrading code that uses a Webdings glyph. Supposedly Webdings is one of those fonts that is universally available across platforms, but I don't want the browser to display the character in its default font if for some strange reason Webdings isn't there.

Is there any way to do this?

Upvotes: 6

Views: 774

Answers (5)

thirtydot
thirtydot

Reputation: 228192

As I said in a comment:

Instead of that, you should use @font-face to embed a fallback font. That's much better than hiding the text, and it works in "all browsers".

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

Upvotes: 1

No_or_yes
No_or_yes

Reputation: 715

You could use a CSS3 property to have the font on your website meaning that all persons having 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 preoccupation now would be about copyrights, I don't know if you're supposed to have rights on this font to be able to use it this way…

Upvotes: 1

Joseph Silber
Joseph Silber

Reputation: 220026

There is no native way to test for font availability in JavaScript.

However, as lalit has realized, since "each character appears differently in different fonts, different fonts will take different width and height for the same string of characters of same font-size".

He has written up a nice article, and created a decent piece of code to do just that: http://www.lalit.org/lab/javascript-css-font-detect/

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could do something like this with jQuery:

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

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

So you check to see the font for the element. If it's not there, you hide it.

Upvotes: 2

laurent
laurent

Reputation: 90804

Only Flash allows you to detect which fonts are installed on the computer. There's a blog post there to show how to get the font list in Flash and pass this list to JavaScript. Once you have it in JavaScript, it should be easy to hide/show the text:

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

Upvotes: 1

Related Questions