Google Font Weight Not Working

by 14ongm

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://leaverou.github.io/conic-gradient/conic-gradient.js"></script>
<body>
    <div class="container-fluid no-right-padding">
        <div class="row-fluid">
            <div class="col-xs-5 col-sm-4">
                <div id="Menu-Header" class="row">
                    <div class="pie"></div>
                    <h1>Problems</h1> 
                </div>
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default panel-wrong">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
                            </h4> </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <ul class="nav nav-pills">
                                    <li class="active"><a data-toggle="pill" href="#home">H</a></li>
                                    <li><a data-toggle="pill" href="#menu1">11</a></li>
                                    <li><a data-toggle="pill" href="#menu2">22</a></li>
                                    <li><a data-toggle="pill" href="#menu3">3</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-wrong">
                        <div class="panel-heading">
                            <h4...

CSS

/*import custom font*/
@import 'https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';

.container-fluid{
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
}

.panel-wrong{
    border-color: #FED0D3;
}
.panel-wrong > .panel-heading{
    background: #FED0D3;
    color: #F53240;
    border-color: #FED0D3;
}

.panel-right{
    border-color: #E5FFFB;
}

.panel-right > .panel-heading{
    background: #E5FFFB;
    color: #02C8A7;
    border-color: #E5FFFB;
}

#accordion{
    margin-top: 20px;
}

#Menu-Header{
    clear: both;
    padding-top: 15px;
    position: relative;
    z-index : 1;
}

#Menu-Header:before {
  content : "";
  position: absolute;
  right    : 13px;
  bottom  : 0;
  height  : 1px;
  width   : 83%;  /* or 100px */
  border-bottom: 1px solid #979797;
}

.pie {
  width: 60px; 
    height: 60px;
    background: conic-gradient(#F53240 40%, #02C8A7 0);
    border-radius: 50%;
    float: left;
}

.h1{
    float: right;
    display: inline-block;
    text-align: center;
    border-bottom: 1px solid black;
}

#Demo-Pane{
    background-color: #86E1D8;
    height: 100vh;
    width: 100%;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}

.no-right-padding{
    padding-right: 0;
}

#Demo-Card{
    background-color: white;
    width: 95%;
    height: 70%;
    display: table;
    margin: 0 auto;
}