CodePen

HTML

            
              <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
  
  <p class="w100">This is 100 weight</p>
  
  <p class="w200">This is 200 weight</p>
  
  <p class="w300">This is 300 weight (available)</p>
  
  <p class="w400">This is 400 weight (available)</p>
  
  <p class="w500">This is 500 weight</p>
  
  <p class="w600">This is 600 weight (available)</p>
  
  <p class="w700">This is 700 weight (available)</p>
  
  <p class="w800">This is 800 weight (available)</p>
  
  <p class="w900">This is 900 weight</p>
            
          
!

CSS

            
              body {
  padding: 0 20px;
  font-family: 'Open Sans';
}

.w100 {
  font-weight: 100;
}

.w200 {
  font-weight: 200;
}

.w300 {
  font-weight: 300;
}

.w400 {
  font-weight: 400;
}

.w500 {
  font-weight: 500;
}

.w600 {
  font-weight: 600;
}

.w700 {
  font-weight: 700;
}

.w800 {
  font-weight: 800;
}

.w900 {
  font-weight: 900;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................