title: How do I override Bootstrap font?
body: <p>I am currently working on developing an HTML and I am using Bootstrap to make it more mobile-friendly. However, the bootstrap font sucks and I am looking to override it and replace it with a better looking font. I am posting the head of my HTML file. It looks like this:</p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt; Connotate Engineering &lt;/title&gt;
    &lt;meta name=viewport content='width=700'&gt;   
    &lt;link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" type="text/css" href="ConnotateEngineering.css"&gt;
    &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
  rel="stylesheet"&gt;
  
    &lt;link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>And this is what my CSS looks like:</p>
  
  <pre><code>body{
    font-family: 'Arial';
    font-size: 12px;
  }
  
  #images{
    font-family: 'Arial';
    text-align:left;
    font-style: regular;
    letter-spacing: 0;
    line-height: 1.5em;
    text-decoration: none;
    word-spacing: 0;
  }
  
  #images a{
    margin:0px 20px;
    display:inline-block;
    height: 100%;
    text-decoration:none;
    color:black;
    font-family: 'Arial', serif;
    }
  
  .caption {
    width: 200px;
    text-align: center;
  }
  
  @media screen and (max-width:480px) {
    #sidebar { display: none;}
  }
  </code></pre>