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