title: How to modify the font family within bootstrap
body: <p>I'm currently trying to change the default font family that is set within bootstrap. As my current CSS code is being overwritten by: scaffolding.less.</p>
  
  <p><a href="https://i.stack.imgur.com/j5xUi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j5xUi.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/DKiQA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DKiQA.png" alt="enter image description here"></a></p>
  
  <p>The first output as seen above shows the text being overwritten by scaffolding.less.</p>
  
  <p><a href="https://i.stack.imgur.com/kCnap.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kCnap.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/MOBEZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MOBEZ.png" alt="enter image description here"></a></p>
  
  <p>The test above shows the correct text font after removeing the css line within the chrome dev tools.</p>
  
  <p>I would like to know How would this be implemented within CSS?</p>
  
  <p>Current Code:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" type="text/css"&gt;
      &lt;style&gt;
  html {
      font: normal 400 1em/1 'Open Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
  }
  &lt;/style&gt;
  </code></pre>