Custom font - special character not showing

Question

I am using a custom font which is missing the special character: "@", but although I add more fonts on the font-family of the element the missing character isn't being replaced. Shouldn't it be displayed?

@font-face {
    font-family: 'mainFont';
    src: url('fonts/font1.eot');
    src: local('☺'), url('../fonts/font1.svg') format('svg'), url('fonts/font1.woff') format('woff'), url('fonts/font1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

&

.text {
    font-family:"mainFont", Verdana, sans-serif;
}

html

<span class="text">email @</span>

Answer 1

Specifying multiple font-families instructs the browser to look for alternatives if the entire font is missing. It won't work for single characters.

You'll have to add the character to your font, or use a different font when using the @ character.

Here is a list of Open-Source Windows font editors that may help.

As a really crappy alternative, you could use jQuery to find all @ characters when the document loads and wrap a span around them that has a different font family. But that's likely to cause flickering on the user's screen.