So I am just beginning to learn HTML and CSS and I am unable to render a text inside a <div>
that has a Google Font linked font family assosiated. Here's the fiddle: Link to fiddle
Here's the html:
<!DOCTYPE html>
<link href="fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" type="text/css">
<title>Genuine CV</title>
<link href="css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/cvstyle.css">
<body>
<div class="header">
<div class="navbar" >
<button class="contact hvr-fade">Contact Me</button>
</div>
<div class="name">
<p> Header Text</p>
</div>
</div>
</body>
And here is the CSS:
body {
background-color: #433E49 ;
}
button:focus {outline:0;}
.header {
margin: auto;
height: 700px;
width: 50%;
/* solid corresponds to color visibility */
/*border: 2px solid #CBD0D8;*/
padding: 0px;
background-color: whitesmoke;
}
.navbar {
margin: auto;
height: 24px;
width: 100%;
/* solid corresponds to color visibility */
/*border: 2px solid #CBD0D8;*/
background-color: #433E49 ;
}
.contact {
/*remove blue border from chrome*/
background: #7f727d;
border: 1px solid #928490;
color: #fff;
display: inline-block;
padding: 5px 20px;
font: normal 400 12px/1 "Open Sans", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
float: right;
}
.name {
background: #fff;
color: #000;
padding: 25px 40px;
line-height: 1;
font-weight: 400;
font-variant: normal;
font-style: normal;
font-size: 45px;
font-family: "Lobster Two", cursive;
text-align: center;
text-shadow: 1px 1px 0 #fff;
}
Where have I done wrong? Thanks.
Change
<link href="fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" type="text/css">
to
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" type="text/css">