✔ and ✘ compatible alternative when lacking font

Question

I am trying to make a page which contains the symbols ✔ and ✘.

These are Unicode ✔ and ✘ respectively. And it works fine on all my browsers. However, some of my testers report having boxes instead of these symbols, and I found it is due to them not having fonts installed. Reference

My options to make it compatible seem to be restricted to:

make the symbols images instead
find a suitable, more compatible, symbol to use instead.

I would prefer not to use images, so I am looking for a similar symbol that doesn't require specific fonts.

I am therefore looking for advice, which symbols do not require specific fonts, as I wasn't able to find that info online. (I was unaware that these required them before)

Any alternative solutions are also welcome.

This is a dupe I think http://stackoverflow.com/questions/658044/tick-symbol-in-html-xhtml — Dave, Oct 29 '13 at 13:29
If you do not want to use italic _v_ and _x_, do not rely on font here, use images - you can not know what client device will render your page and what fonts and character glyphs it supports. — mas.morozov, Oct 29 '13 at 13:34
Why not just use `font-face` to deliver a font which does support the symbols? — robertc, Oct 29 '13 at 13:38
Putting this not as an answer because it is only my opinion. But those symbols are incredibly universal. I personally feel that they are universal enough to discount a few reported bad cases. Just my two cents though. Maybe you could download the dingbats font and include it via css (as recommended by @robertc) — Joel Worsham, Oct 29 '13 at 13:47
@robertc I believe font-face doesn't work on IE6/7/8? Is there an alternative to font-face that would work with them as well? — Amber, Oct 29 '13 at 13:47
`font-face` works on [IE5.5](http://caniuse.com/fontface) if you use an EOT format typeface. Have a read of [Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/) or use one of the many services which do all of it for you. — robertc, Oct 29 '13 at 13:50
`font-face` have good, but not absolute good support across mobile browsers - http://caniuse.com/fontface — mas.morozov, Oct 29 '13 at 14:00

score 1 · Accepted Answer · answered Oct 29 '13 at 14:29

There are no suitable characters with wider support in fonts. That is, other characters that are somewhat similar have even more limited font support.

If you want to use those specific symbols, the most practical approach is to use images, in sufficiently large size (about 50×50 pixels) and scaled down with CSS to match font size (using e.g. height: 0.7em in CSS), with adequate alt attributes like OK and wrong.

Using an embedded font to get just two characters would be somewhat disproportionate. Using icon font trickery would imply accessibility problems (you cannot really hear an empty element, can you).

Using characters like “v” and “x” as replacements would make an unprofessional impression and could cause problems in understanding.

Note that the symbols “✔” and “✘” are not universal. In some cultures, “✔” has traditionally been used to indicate errors (incorrectness), and “✘” may be seen as a neutral check mark (indicating that something was checked, but without implying a positive or negative result). So maybe you need not take extra measures to use them. Some words (localizable, of course, if the application or page as a whole is to be localizable) might be used instead. At least for correctness, “OK” is widely understood and can hardly be misunderstood.

score 0 · Answer 2 · edited Oct 29 '13 at 14:16

I would :

find a font containing these symbols
use an @font-face is my css to load the relevant font
define a span.myfont in my css using the font i found

for exemple usint the entypo webfontkit found on http://www.fontsquirrel.com/fonts/entypo?q[term]=entypo&q[search_check]=Y

css :

@font-face {
    font-family: 'entyporegular';
    src: url('Entypo-webfont.eot');
    src: url('Entypo-webfont.eot?#iefix') format('embedded-opentype'),
     url('Entypo-webfont.woff') format('woff'),
     url('Entypo-webfont.ttf') format('truetype'),
     url('Entypo-webfont.svg#entyporegular') format('svg');
font-weight: normal;
font-style: normal;

}
span.symbols { font-family: 'entyporegular'; /*rest of your css here*/}

HTML :

<span class="symbols">&#87;</span>
<span class="symbols">&#88;</span>

Using a webfont this way you'd ensure independance from system fonts and be sure to load the proper characters

score 0 · Answer 3 · answered Oct 29 '13 at 14:02

You can use Font Awesome for this. Include the following into your HTML head:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

Then use <i class="fa fa-check"></i> or <i class="fa fa-times"></i> to display the two icons check and times (maybe there's also a better one for times, have a look on the complete list)

✔ and ✘ compatible alternative when lacking font

3 Answers3