Search code examples
htmlcssgoogle-font-api

Unable to Render Google Font


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.


Solution

  • 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">