複数のフォントフェイスの宣言でエラー

Question

CSS @font-faceルール：

@font-face { 
    font-family: 'Lato'; 
    src: url('fonts/Lato-Italic.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'Lato'; 
    src: url('fonts/Lato-Light.ttf') format('truetype'); 
    font-weight: light; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Lato'; 
    src: url('fonts/Lato-HairlineItalic.ttf') format('truetype'); 
    font-weight: lighter; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'Lato'; 
    src: url('fonts/Lato-Bold.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
} 

とその用途：

.ingrijirea-main { 
    margin-top: 100px; 
    background-color: #2A2D4C; 
    color: white; 
    height: 500px; 
} 

.ingrijirea-title { 
    font-size: 2em; 
    text-align: center; 
    margin-top: 45px; 
    margin-bottom: 30px; 
    p { 
     margin-bottom: 0; 
    } 
    .ingrijirea-title-bottom { 
     font-weight: lighter; 
     font-style: italic; 
    } 
} 

.ingrijirea-text { 
    font-size: 1.28em; 
    font-weight: light; 
    text-align: justify; 

    p{ 
     margin-bottom: 15px; 
    } 

    .ingrijirea-options { 
     margin-top: 30px; 
     p { 
      margin-bottom: 7px; 
     } 
     p:hover { 
      font-weight: bold; 
     } 
    } 
} 

そして、これが私のHTMLです：

<div class="ingrijirea"> 
    <div class="container-fluid"> 
     <div class="row ingrijirea-main"> 
      <div class="col-md-4 col-md-offset-2"> 
       <div class="ingrijirea-title"> 
        <p class="ingrijirea-title-top">Lorem ipsum</p> 
        <p class="ingrijirea-title-bottom">Lorem ipsum</p> 
       </div> 
       <div class="ingrijirea-text"> 
        <p>Lorem ipsum</p> 
        <p>Lorem ipsum</p> 
        <p>Lorem ipsum</p> 
        <div class="ingrijirea-options"> 
         <p class="ingrijirea-option">Lorem ipsum</p> 
         <p>Lorem ipsum</p> 
         <p>Lorem ipsum</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

問題がでていることですこのコードはこのセクションだけでなく、ページ全体がfont-weight:lightに変換されていますが、理由はわかりません。

ご協力いただければ幸いです。

Answer 1

宣言の順番は問題が解決しない

@font-face { 
    font-family: 'Lato'; 
    src: url('fonts/Lato-HairlineItalic.ttf') format('truetype'); 
    font-weight: lighter; 
    font-style: italic; 
} 


@font-face { 
    font-family: 'Lato'; 
    src: url('fonts/Lato-Light.ttf') format('truetype'); 
    font-weight: light; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Lato'; 
    src: url('fonts/Lato-Italic.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: italic; 
} 


@font-face { 
    font-family: 'Lato'; 
    src: url('fonts/Lato-Bold.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
}