title: css font family not appearing?
body: <p>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..</p>
  
  <p>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)</p>
  
  <p>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?</p>
  
  <p>Here's the CSS i'm using.</p>
  
  <pre><code>@font-face {
  font-family: "Pixelated";
  src: url('templates/joostrap/fonts/pixelated.ttf');
  }
  </code></pre>
  
  <p>This is how i'm applying it.</p>
  
  <pre><code>{font-family: "Pixelated"; text-transform: uppercase;}
  </code></pre>
  
  <p>Any help would be appreciated! cheers!</p>