ブートストラップがGoogleフォントを無効にする

Question

他の回答を見ても、私は使用したいGoogleフォントを無効にしないためにブートストラップを取得できません。私は自分のスタイルシートの位置を変更しようとしましたが、何も動作しません。
これに関するお手伝いがあれば幸いです。

http://codepen.io/01scatman/pen/KzGdNY

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="AOS-TC.css"> 
    <link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'> 

Answer 1

私は、ドキュメントに次のが、何もない、それが動作します。ブートストラップはフォントを上書きしません。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="AOS-TC.css"> 
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'> 

<style> 
    body{ 
    font-family: 'Arvo', serif; 
    } 
</style> 

Hello 

Answer 2

たぶんフォントが上書きされていますが、適用する（CodePen上）fontSwitcherを使用することができますなぜあなたの体のCSS

body { 
 
    margin: 0; 
 
    padding: .1px; 
 
    position: relative; 
 
    background: url(http://www.adventuresofscatman.com/wp-content/uploads/2015/09/IMG_4273.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-color: #555; 
 
    overflow-x: hidden; 
 
    font-family: Arvo !important; 
 
    font-weight: 700; 
 
}

Answer 3

わからないの "重要" を追加してみてくださいそれ。私はあなたのペンでそれを試し、それはArvoを適用します。先頭に次の行を追加します。JavaScriptのセクションに

<script src="http://codepen.io/freginold/pen/vLJewY.js"></script>

そして、この行：

fontSwitcher('fontName', 'elementClass');

fontSwitcherは、クラスによって、Googleのフォントを適用し、あなたはそれを適用する場合ボディ全体にクラスを割り当て、そのクラスにフォントを適用します。

また、このように、代替フォントを指定することができます。

fontSwitcher('fontName', 'elementClass'[, 'fallbackFont1', 'fallbackFont2' ...]);

免責事項：fontSwitcherはまだ進行中の作業ですが、それは完全に機能するのです。