Search code examples
htmlcsswebfont-face

CSS Change text if font-face does not exist?

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).

Solution

  • 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