Custom font - special character not showing

Custom font - special character not showing

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>