title: font roboto doesn't work
body: <p>I am trying to add the roboto-regular and roboto-light but it doesn't seem to work, i don't now how to do it so I'm asking for guidance... </p>
  
  <p>This is a link to my code  </p>
  
  <p><a href="https://jsfiddle.net/omer1234/rmje7xz3/12/" rel="nofollow noreferrer">https://jsfiddle.net/omer1234/rmje7xz3/12/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="MyApp"&gt;
  &lt;head&gt;
                  &lt;link rel="stylesheet" href="noteBack.css"&gt;
                  &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'&gt;
                  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
                  &lt;!-- Latest compiled and minified CSS --&gt;
                  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  
                  &lt;!-- Optional theme --&gt;
                  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"&gt;
  
                  &lt;!-- Latest compiled and minified JavaScript --&gt;
                  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
                  &lt;link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css"&gt;
                  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"&gt;&lt;/script&gt;
                  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"&gt;&lt;/script&gt;
                  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"&gt;&lt;/script&gt;
                  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"&gt;&lt;/script&gt;
                  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"&gt;&lt;/script&gt;
                  &lt;script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.js"&gt;&lt;/script&gt;
                  &lt;script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
          &lt;div class="container-box "&gt;
              &lt;header&gt;&lt;span&gt;Note Details&lt;/span&gt;&lt;/header&gt;
              &lt;div class="sub-header"&gt;&lt;span&gt;Friday 25.7.13 &lt;/span&gt;&lt;/div&gt;
  
              &lt;div class="sub-container-box opacity-affect"&gt;
              &lt;div class="dialog-box"&gt;&lt;!--first white box inside the note--&gt;
                  &lt;div class="dialog-box-circle"&gt;&lt;/div&gt;
                  &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
                  &lt;span class="dialog-box-name"&gt;Lea Poran -&lt;select&gt;
                  &lt;option&gt;@private&lt;/option&gt;       
                  &lt;option&gt;@public&lt;/option&gt;        
                 &lt;/select&gt;
                 &lt;/span&gt;
                 &lt;span class="dialog-box-day"&gt;2d ago&lt;/span&gt;
  
                 &lt;div class="dialog-box-text"&gt;Don't forget to bring the new calender for the meeting.&lt;/div&gt;
  
              &lt;/div&gt;
  
                  &lt;div class="dialog-box"&gt; &lt;!--second white box inside the note--&gt;
                  &lt;div class="dialog-box-circle"&gt;&lt;/div&gt;
                  &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
                  &lt;span class="dialog-box-name"&gt;You -&lt;select&gt;
                  &lt;option&gt;@private&lt;/option&gt;       
                  &lt;option&gt;@public&lt;/option&gt;        
                 &lt;/select&gt;
                 &lt;/span&gt;
                 &lt;span class="dialog-box-day"&gt;2d ago&lt;/span&gt;
  
                 &lt;div class="dialog-box-text"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet ex vitae mi venenatis odio felis convallis. Praesent ut consequat orci, amet elit mollis molestie. Curabitur rhoncus enim &lt;/div&gt;
  
              &lt;/div&gt;
  
                  &lt;div class="dialog-box"&gt; &lt;!--third white box inside the note--&gt;
                  &lt;div class="dialog-box-circle"&gt;&lt;/div&gt;
                  &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
                  &lt;span class="dialog-box-name"&gt;You -&lt;select&gt;
                  &lt;option&gt;@private&lt;/option&gt;       
                  &lt;option&gt;@public&lt;/option&gt;        
                 &lt;/select&gt;
                 &lt;/span&gt;
                 &lt;span class="dialog-box-day"&gt;3d ago&lt;/span&gt;
  
                 &lt;div class="dialog-box-text"&gt;In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eget eros pretium, sagittis tortor at, tempor turpis. Morbi porttitor nulla urna, sed tincidunt eros mollis eu. Nam gravida est sit &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="dialog-box-date"&gt; &lt;!--gray box - contains the date--&gt;
              &lt;span class="dialog-box-date-text"&gt;In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eg
              &lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div class="dialog-box"&gt;&lt;!--replay of the first white box inside the note--&gt;
                  &lt;div class="dialog-box-circle"&gt;&lt;/div&gt;
                  &lt;span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"&gt;&lt;/span&gt;
                  &lt;span class="dialog-box-name"&gt;Lea Poran -&lt;select&gt;
                  &lt;option&gt;@private&lt;/option&gt;       
                  &lt;option&gt;@public&lt;/option&gt;        
                 &lt;/select&gt;
                 &lt;/span&gt;
                 &lt;span class="dialog-box-day"&gt;2d ago&lt;/span&gt;
  
                 &lt;div class="dialog-box-text"&gt;Don't forget to bring the new calender for the meeting.&lt;/div&gt;
  
              &lt;/div&gt;
                  &lt;img src="D:\Meeter1\first assaiment home\attach.png"&gt;
              &lt;/div&gt; &lt;!--close sub-container--&gt;
            &lt;img src="D:\Meeter1\first assaiment home\attach.png"&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>.container-box{     
      /*position:absolute;*/
      width:382px;
      height:529px;
      background-color:lightgray;
      overflow:hidden;
      border:1px solid #cccccc;
      margin:auto;
  
  
  }
  /* .opacity-affect{                 //After button click blur the background
  
      opacity:0.5;
  }    */
  
  header{                     /*the red head line*/
      position:relative;
      width:100%;
      height:41px;
      color:white;
      background-color:#de4b4b;   
      font-weight: bold;
      font-size:14px;
      margin:auto;
  
  }
  header span{         /*text inside the  red head line*/
  display:inline-block;
  padding-left:148px;
  padding-top:14px;
  padding-bottom:14px;
  
  }
  .sub-header{         /*white sub head line*/
      position:relative;
      width:100%;
      height:37px;
      background-color:white;
      font-size:10px;
      color:#454545;
      font-family:'roboto_regular';
  
  
  }
  .sub-header span{         /*text inside the white sub head line*/
      display:inline-block;
      padding-top:14px;
      padding-left:10px;
  }
  .dialog-box{                    /*the white boxes inside the note main*/
      position:relative;
      width:365px;    
      background-color:white;
      margin: 0px 8px 10px 8px;
      border:1px solid #cccccc;
  }
  .dialog-box-circle{
  
      display:inline-block;
      float:left;
      width:35px;
      height:35px;
      border-radius:30px;
      background-color:#cccccc;
      margin:15px 10px 17px 15px;
      vertical-align:middle;/*allow text to appear next to the circle div */
  
  }
  .dialog-box-name{
      display:inline-block;
      color:#6495ED;
      font-size:12px;
      margin-top:21px;
      font-weight:bold;
  
  
  
  }
  .dialog-box-text{
  
      color:#040404;
      font-size:10px;
      font-family:'roboto_light';
      line-height:9px;     /*the space between the line*/
      margin-left:15px;
      margin-bottom:15px;
      margin-top:17px;
      margin-right:17px;
      bottom:0;
      left:0;
  
  
  }
  .dialog-box-name select {
          border:0px;
          font-size:10px;
          font-family:'roboto_regular';
          color:#454545;
          cursor: pointer;
  
  }
  
  .dialog-box-day{
      display:block;
      font-size:9px;
      font-family:'roboto_regular';
      margin:0px;
      font-weight:bold;
  
      }
  
  .dialog-vertical-menu{
      float:right;
      margin:8px;
  
  }
  .dialog-box-date{        /*the gray box inside the note main*/
      position:relative;
      width:365px;    
      height:37px;
      margin: 0px 8px 10px 8px;
      background-color:#cccccc;
  
  }   
  .dialog-box-date-text {
      display:inline-block;
      font-family:'roboto_regular';
      font-size:9px;
      color:#000000;
      margin-left:15px;
      margin-top:15px;
  
  }
  @font-face {
      font-family: 'RobotoLight';
      src: url('fonts/RobotoLight.eot');
      src: url('fonts/RobotoLight.eot') format('embedded-opentype'),
           url('fonts/RobotoLight.woff2') format('woff2'),
           url('fonts/RobotoLight.woff') format('woff'),
           url('fonts/RobotoLight.ttf') format('truetype'),
           url('fonts/RobotoLight.svg#RobotoLight') format('svg');
  }
  
  @font-face {
      font-family: 'RobotoRegular';
      src: url('fonts/RobotoRegular.eot');
      src: url('fonts/RobotoRegular.eot') format('embedded-opentype'),
           url('fonts/RobotoRegular.woff2') format('woff2'),
           url('fonts/RobotoRegular.woff') format('woff'),
           url('fonts/RobotoRegular.ttf') format('truetype'),
           url('fonts/RobotoRegular.svg#RobotoRegular') format('svg');
  }
  </code></pre>