title: CSS custom fonts
body: <p>I have the following font files:</p>
  
  <pre><code>Raleway-Bold.ttf
  Raleway-ExtraBold.ttf
  Raleway-ExtraLight.ttf
  Raleway-Heavy.ttf
  Raleway-Light.ttf
  Raleway-Medium.ttf
  Raleway-Regular.ttf
  Raleway-SemiBold.ttf
  Raleway-Thin.ttf
  </code></pre>
  
  <p>Now i have implemented them in my css like follow:</p>
  
  <pre><code>    @font-face {
      font-family: 'Raleway';
      src: url('/site/resources/fonts/Raleway-Regular.ttf');
  }
  
  .bold
  {
      font-family: "Raleway-bold"; !important;
      src: url('/site/resources/fonts/Raleway-Bold.ttf');
  }
  
  
  .extraBold
  {
      font-family: "Raleway"; !important;
      src: url('/site/resources/fonts/Raleway-ExtraBold.ttf');
  }
  
  
  .extraLight
  {
      font-family: "Raleway"; !important;
      src: url('/site/resources/fonts/Raleway-ExtraLight.ttf');
  }
  
  
  .heavy
  {
      font-family: "Raleway"; !important;
      src: url('/site/resources/fonts/Raleway-Heavy.ttf');
  }
  
  
  .light
  {
      font-family: "Raleway"; !important;
      src: url('/site/resources/fonts/Raleway-Light.ttf');
  }
  
  
  .medium
  {
      font-family: "Raleway"; !important;
      src: url('/site/resources/fonts/Raleway-Medium.ttf');
  }
  
  
  
  .thin
  {
      font-family: "Raleway"; !important;
      src: url('/site/resources/fonts/Raleway-Thin.ttf');
  }
  
  
  .semi_bold
  {
      font-family: "Raleway"; !important;
      src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
  }
  </code></pre>
  
  <p>However when i change the class to <code>semi_bold</code> for example nothing changes? so am i implementing them in a wrong way or am i missing something?</p>
  
  <p><strong>Note</strong> That the first raleway the font-face works fine but it is the rest that doesnt seem to make any changes to my text</p>