css missing symbol in web font

I'm using a custom web font for my pages. This one. I've opened the tff file to examine the characters, and it seems that only alphanumeric characters are supported.

My guess is that if a particular character is not supported, it will fall back to the rest of the font family. However, when rendering a $ symbol on my browsers, it turned out to be like this.

wrong rendering

My css

body {
    font-family: 'madfont',"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

Why is the browser not rendering in Helvetica Neue or even san-serif the character $??

Solution

You are mistaken about the $ which you think is supported but it isn't, if you go to the fonts page, see the third image, which lists out all the characters... I don't see the $ anywhere...

enter image description here

To confirm this I also used customize option and yes, the $ throws me a *

enter image description here

So the best thing you can do here is, either change the font family, or wrap the $ in span element and use Arial as a font family for the span.