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...
This is a link to my code
https://jsfiddle.net/omer1234/rmje7xz3/12/
HTML:
<!doctype html>
<html ng-app="MyApp">
<head>
<link rel="stylesheet" href="noteBack.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
</head>
<body>
<div class="container-box ">
<header><span>Note Details</span></header>
<div class="sub-header"><span>Friday 25.7.13 </span></div>
<div class="sub-container-box opacity-affect">
<div class="dialog-box"><!--first white box inside the note-->
<div class="dialog-box-circle"></div>
<span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">Lea Poran -<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>
</div>
<div class="dialog-box"> <!--second white box inside the note-->
<div class="dialog-box-circle"></div>
<span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">You -<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">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 </div>
</div>
<div class="dialog-box"> <!--third white box inside the note-->
<div class="dialog-box-circle"></div>
<span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">You -<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">3d ago</span>
<div class="dialog-box-text">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 </div>
</div>
<div class="dialog-box-date"> <!--gray box - contains the date-->
<span class="dialog-box-date-text">In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eg
</span>
</div>
<div class="dialog-box"><!--replay of the first white box inside the note-->
<div class="dialog-box-circle"></div>
<span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">Lea Poran -<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>
</div>
<img src="D:\Meeter1\first assaiment home\attach.png">
</div> <!--close sub-container-->
<img src="D:\Meeter1\first assaiment home\attach.png">
</div>
</body>
</html>
css:
.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');
}
Answer
You can remove all the @font-face clauses and just use this property on whatever class you want to use Roboto:
font-family: 'Roboto', sans-serif;
If you're not sure whether it works at all anywhere, try adding this CSS for debugging:
body{
font-family: 'Roboto', sans-serif;
}
Also, always put your font includes at the top of your <head> element, above your CSS include, like so:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <!-- Include font first -->
<link href="style.css" rel="stylesheet"> <!-- Then include stylesheet -->
</head>
<body>
</body>
</html>