La propiedad de font-weight no está siendo aplicada.

Estoy enfrentando un problema de peso de fuente en CSS. Tengo un sitio en el que quiero reducir el peso de la fuente, pero parece estar fijo incluso en el peso más ligero, es decir, el 100 se ve así.

Pero quiero que se vea así

La fuente que estoy utilizando es Merriweather-Sans.

Mi archivo CSS 1 contiene los estilos relacionados con el cuerpo y los encabezados:

body {
  font-size: $font-size-base;
  line-height: line-height($font-size-base);
  color: $color-black;
}

h1 {
  font-size: $font-size-h1;
  line-height: line-height($font-size-h1);
  margin-bottom: $spacer;
  font-weight: 100;
  color: $color-slate;
}

h2 {
  font-size: $font-size-h2;
  line-height: line-height($font-size-h2);
  font-weight: $font-weight-light;
  color: $color-crimson;
  margin-bottom: $spacer;
  color: $color-slate;
  text-transform: capitalize;
}

h3 {
  font-size: $font-size-h3;
  line-height: line-height($font-size-h3);
  font-weight: $font-weight-normal;
  margin-bottom: $spacer;
  color: $color-slate;
}

h4 {
  font-size: $font-size-h4;
  line-height: line-height($font-size-h4);
  margin-bottom: $spacer;
}

p {
  font-size: $font-size-base;
  line-height: line-height($font-size-base);
  margin-bottom: $spacer;
  color: $color-slate;
}

Mi archivo CSS 2 contiene las variables declaradas en el CSS anterior:

/* === Typography === */
@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans');

$font-family-base: 'Merriweather Sans', sans-serif;

$font-size-base: 1rem;
$font-size-h1: $font-size-base * 3;
$font-size-h2: $font-size-base * 2;
$font-size-h3: $font-size-base * 1.75;
$font-size-h4: $font-size-base * 1.25;
$font-size-lead: $font-size-base * 1.25;
$font-size-small: $font-size-base * 0.875;

$font-weight-light: 200;
$font-weight-normal: 400;
$font-weight-bold: 700;

/* === Line height === */

$line-height-list: 1.5rem;