CSS Change text if font-face does not exist?

Question

Is there a way to change what text is displayed in a HTML file based on if the user has a certain font-face (preferrably without javascript)?

For example if there is a font-face 'AlphaIcons' I want to display:

<span>A</span>

Else I want to display:

<span><img src="apple.png">Apple</span>

(Giving the font to users without it is not an option in this case).

Answer 1

EDITED*** Check out this post - it may lead you in the right direction: Changing Body Font-Size based on Font-Family with jQuery

In the first answer, it gives a new library that can detect fonts. If you can give it a true/false boolean, then you may be able to write in an image swap.

---

I believe CSS can do this already for you, using font-family prioritizes the fonts you want to use. If it can't find the first font on the user's system, it goes to the next.

http://www.w3schools.com/css/css_font.asp

Just use css like so:

span {
    font-family:"AlphaIcons", "Times New Roman", Times, serif;
}

or am I missing something???

If you want to do some fancier fonts using javascript, check out Google's webfont library: http://www.google.com/webfonts

Answer 2

You can't check this with pure HTML or CSS. You need Javascript to handle this problem.

Go through the following steps:

• Embed the font files via font-face
• Detect if font-face is avaiable in the clients browser with javascript. e.g. modernizr can do the trick
• When font-face isn't available, insert the image into the span with the following code:

HTML

<span data-image="apple.png">A</span>

Javascipt

// check font face compatibility
if (!Modernizr.fontface) {

    // replace each span content with the right image
    $('span').each(function(){

        // get the image 
        var image = $(this).data('image');

        // insert this image into the span tag  
        $(this).html('<img src="'+image+'" />');
    });
}

data-attributes are only one of many possible solutions. Just a little hint.

In general, there a no methods to check the availability of fonts without Javascript.