CSS Change text if font-face does not exist? - html

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.