title: Bootstrap Header not using CSS font family
body: <p>I am new to web design, html and css, but found bootstrap to be workable with my experience. My problem is that I can't figure out why my font-family is not getting picked up by my Header. I have loaded the Google fonts html code and added the font-family CSS to just about everywhere I can think of without any changes getting picked up by the html code. I want the whole header, but only the header to use Cantarell.</p>
  
  <p>This is the code in my head as provided by Google</p>
  
  <pre><code>    &lt;link href='http://fonts.googleapis.com/css?family=Cantarell|Open+Sans' rel='stylesheet' type='text/css'&gt;
  
  
      &lt;span itemscope itemtype="http://schema.org/LocalBusiness"&gt; &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
            &lt;li class="list-img"&gt;&lt;a href="/index.html"&gt;&lt;img src="wildfly.png" alt=" "&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="/aboutme.html"&gt;ABOUT ME&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;DROPDOWN&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="/pineisland.html"&gt;Pine Island&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/li&gt;
          &lt;li class="navbar-link"&gt;&lt;a rel="author" href="#" target="_blank"&gt;CAPT&amp;#039;S BLOG&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/media.html"&gt;MEDIA&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/rates.html"&gt;RATES&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#" target="_top"&gt;&lt;span itemprop="email"&gt;##&lt;/a&gt;&lt;/li&gt;
      &lt;li class="number"&gt;| 123.123.1234&lt;/li&gt;
        &lt;/ul&gt;
  
  
  
  .navbar li, p, a:link, a:visited {
  display: inline;
  font-size: 15px;
  text-decoration:none;
  color: #898989;
  font-family: 'Cantarell', sans-serif;
  }
  
  .navbar li a:hover,ul#nav li.selected {
  color:  #FFF ;
  font-weight: bold;
   }
  
   .navbar-link  a:visited {
  color: #898989;
  }
  
   .navbar li.active a {
  color: #FFF;
  text-decoration: underline;
  font-size:16px;
  font-weight: bold;
  border-radius: 10px;
   }
  
  .navbar img {   
  height: 65px;
   }
  
  .navbar li.number {
  color: #BFBFBF;
  font-size:20px;
  font-style:italic;
  } 
  
  .number {
  text-decoration:none;
      padding-top:9px
  }
  
   .navbar-collapse {
  padding-top: 7px;
  text-transform: uppercase;
  padding-left: 5px;
  padding-right: 5px;
  
   }
  
   .navbar-right {
  color: #BFBFBF;
  padding: 5px;
  padding-top: 0px;
  text-transform: none;
  }
  </code></pre>
  
  <p>I am new to coding websites as this is my first one, but would appreciate any help! </p>