CODEWITHSUNDEEP
htmlcssgoogle-font-api
Jishan
Jishan

Reputation: 1684

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.

Upvotes: 0

Views: 78

Answers (2)

user7234396
user7234396

Reputation:

On a side-note that may or may not be related: (this will also fix your issue)

you can reduce the number of http requests by 1 if you copy the contents of the Google CSS sheet into your main CSS sheet.

If you decide to do that, you can go ahead and delete the reference to the google fonts Stylesheet from the <head> section

Here's a working example

@font-face {
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster Two'), local('LobsterTwo'), url(http://fonts.gstatic.com/s/lobstertwo/v9/Law3VVulBOoxyKPkrNsAaI4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
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;
}
<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>

Upvotes: 1

tomaroo
tomaroo

Reputation: 2534

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

Upvotes: 2

Related Questions