Overriding Bootstrap's CSS : <p>I can't seem to override Bootstrap's CSS despite following instructions found in other questions. </p>

<pre><code>&lt;!-- Bootstrap --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;        
&lt;!-- Custom CSS --&gt;
&lt;link rel="stylesheet" href="css/styles.css"&gt;
        ...
&lt;!-- GRID SECTION --&gt;
&lt;div class="container"&gt;
    &lt;div class="row"&gt;
       &lt;div class="col-md-2"&gt;   
       &lt;/div&gt;
       &lt;div class="col-md-8"&gt;
       &lt;h1 id="title"&gt;TITLE&lt;/h1&gt;    
       &lt;/div&gt;
       &lt;div class="col-md-2"&gt;               
       &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The CSS it this:</p>

<pre><code>@font-face {
    font-family: hnl;
    src: url('fonts/hnl.otf'); 
}

body {
    font-family: hnl;
}

#title {
    font-family: hnl;
    text-align: center; 
}
</code></pre>

<p>However, the font doesn't change, and the text does not align.
How can override Bootstrap's CSS?</p>
