title: Why is google font weight not working?
body: <p>I'm trying to change <code>h1</code> to <code>font-weight: 300</code>. Except when I did:</p>
  
  <pre><code>.h1{
      font-weight: 300;
  }
  </code></pre>
  
  <p>Nothing happened!</p>
  
  <p>So to test the font weight on other text elements, I set the entire encapsulating container, <code>container-fluid</code>, to a <code>font-weight: 200</code>:</p>
  
  <pre><code>.container-fluid{
      font-family: 'Work Sans', sans-serif;
      font-weight: 200;
  }
  </code></pre>
  
  <p>...And only a couple elements changed their <code>font-weight</code> (see here: <a href="https://jsfiddle.net/14ongm/wzepw41a/3/" rel="noreferrer">JFiddle</a>). The rest stayed the same.</p>
  
  <p>Why is this happening? If someone could show me how to change the font-weight of <code>h1</code>, that would be very appreciated!</p>
  
  <hr>
  
  <p>I'm using Chrome if that's relevant. But I also ran my JFiddle on Safari and it was the same result.</p>
  
  <p>I imported all the font weights that I needed at the top of my <em>CSS file</em>:</p>
  
  <pre><code>/*import custom font*/
  @import 'http://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';
  </code></pre>
  
  <p>I tried using <code>http:</code> as <a href="https://stackoverflow.com/questions/20525609/font-weight-with-google-fonts-roboto-normal-400-and-bold-700-work-light-3">this post</a> suggested. Didn't change anything.</p>