부트 스트랩 CSS 글꼴 군을 사용하지 않는 헤더

Question

나는 웹 디자인, html, css에 익숙하지 않지만 내 경험으로 실행할 수있는 부트 스트랩을 발견했다. 내 문제는 내 글꼴 가족이 내 머리글에서 왜 집어 들지 않는지 알아낼 수 없다는 것입니다. Google 글꼴 html 코드를로드하고 html 코드에서 변경 사항을 고려하지 않고 생각할 수있는 글꼴 패밀리 CSS를 추가했습니다. 전체 헤더를 원하지만 Cantarell을 사용하는 헤더 만 필요합니다.

이

내가이 내 첫 번째와 같이 웹 사이트를 코딩 새로운 오전 구글

<link href='http://fonts.googleapis.com/css?family=Cantarell|Open+Sans' rel='stylesheet' type='text/css'> 


    <span itemscope itemtype="http://schema.org/LocalBusiness"> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
      <li class="list-img"><a href="/index.html"><img src="wildfly.png" alt=" "></a></li> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="/aboutme.html">ABOUT ME</a></li> 
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">DROPDOWN<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="/pineisland.html">Pine Island</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li><a href="#">Separated link</a></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
</li> 
     <li class="navbar-link"><a rel="author" href="#" target="_blank">CAPT&#039;S BLOG</a></li> 
    <li><a href="/media.html">MEDIA</a></li> 
    <li><a href="/rates.html">RATES</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" target="_top"><span itemprop="email">##</a></li> 
    <li class="number">| 123.123.1234</li> 
     </ul> 



.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; 
} 

으로 내 머리에있는 코드가 제공되는 한, 그러나 어떤 도움을 주셔서 감사합니다 것입니다!

Answer 1

font-family를 추가해야합니다. 'Cantarell'; 당신의 신체 계급에게. 예 : 자신의 스타일 시트 추가 all.css (반드시 머리에 쓰세요.) ...

body { font-family: 'Cantarell'; }