title: How to use a different font-family for mobile users?
body: <p>I have a mobile responsive website build on Twitter Bootstrap which has a different <code>font-family</code> for different elements, e.g.</p>
  
  <pre><code>.body {
      font-family: Comic Sans;
  }
  .header {
      font-family: Arial;
  }
  .main {
      font-family: Helvetica;
  }
  .footer {
      font-family: sans-serif;
  }
  #someOtherElement {
      font-family: Times New Roman;
  }
  </code></pre>
  
  <p>What would be the right way to override the font of every element on the website with a common font-family say, <code>Open Sans</code> but just for mobile devices?</p>
  
  <hr>
  
  <p><strong>N.B.</strong> I had initially thought of using <code>Media Queries</code> but the width of new phones and tablets are as high or even higher than PC monitors so using media queries was not going to work.</p>
  
  <p>Also, I'm open to solutions that require <code>JavaScript</code> but would prefer a <code>CSS</code> method of achieving this font responsiveness.</p>