css font family not appearing?

css font family not appearing?

I've ran into an issue with font-family; basically I'm doing all the right
things (I hope) yet for some reason the font is doing some weird things.
So let me explain the issue..
On my browser the font appears OK in chrome/IE yet it doesn't appear in
mozilla. On my dad's laptop, the font doesn't appear what-so-ever in any
browser. On my mates apple mac, the font appears in Safari but not in
chrome. On iPhone the font appears. On Nexus 4 the font doesn't appear (in
Chrome or Mozilla)
This is why I'm confused; Why is it appearing in some browsers on
different platforms and not on the others? Can a font be specific to an
OS?
Here's the CSS i'm using.
@font-face {
font-family: "Pixelated";
src: url('templates/joostrap/fonts/pixelated.ttf');
}
This is how i'm applying it.
{font-family: "Pixelated"; text-transform: uppercase;}
Any help would be appreciated! cheers!