5. More fonts

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/learn-html-css/lessons/css-fonts/exercises/more-fonts

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
I am presented with this error message:

expected div.content > h1 to have its font-family style equal to “Playfair Display”, serif but got ‘Playfair Display’, serif

I don’t understand what the issue is so any help is appreciated.

```

body {
/* Old browsers /
background: #141E30;
/
Chrome 10-25, Safari 5.1-6 /
background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
/
W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(-45deg, #35577D, #141E30);
margin: 0;
padding: 0;
}

h1 {
font-family: Playfair Display, serif;
color: #FFF;
font-size: 32px;
padding-top: 100px;
text-align: left;
width: 60%;
}

h2 {
font-family: Roboto,sans-serif;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.5);
font-weight: 100;
font-size: 22px;
line-height: 24px;
padding-bottom: 30px;
text-align: left;
width: 70%;
}

p {
line-height:1.7em;
font-size:20px;
font-family:Roboto,sans-serif;
color: AliceBlue;
line-height: 1em;
text-align: left;
width: 100%;
}

.byline {
color: rgba(255, 255, 255, 0.5);
float: left;
font-family: ‘Roboto’, sans-serif;
font-weight: 100;
font-size: 14px;
padding-left: 10px;
text-transform: uppercase;
}

.caption {
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.65);
display: block;
font-family: ‘Playfair Display’, serif;
font-size: 14px;
font-style: italic;
line-height: 14px;
margin-left: 20px;
padding: 10px;
position: relative;
top: 80%;
width: 60%;
}

.content {
padding: 40px;
}

.image {
background-image: url(“https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_soccer.jpeg”);
background-size: cover;
background-position: center;
height: 300px;
}

.writer-img {
-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
float: left;
width: 50px;
}

<do not remove the three backticks above>

I do the same thing as you and it works.

I think you can try to put:

font-family: ‘Playfair display’, serif;

instead of

font-family: Playfair display, serif;

If this not works I don’t know what the problem.

I typed the below and it worked for me:

h1 {
color: #FFF;
font-size: 32px;
padding-top: 100px;
text-align: left;
width: 60%;
font-family: Playfair Display, serif;
}

I was stuck with the Roboto thing for a while before I realised I misspelt the name of the css sheet in the index.html

the below worked for me although it does give me an error message:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display"

Hope this helps!

2 posts were split to a new topic: I still can’t move past this point

There appears to be a bug here. Getting the same error whether ", ’ or nothing at all.

In order to get past the error and proceed, I went to the index.html tab and changed the h1 element to h3, I was able to move on.

3 Likes

Thx!this work for me

thanks for the tip cheqmate
all is OK

Thank you! this work for me too, Im working in ubuntu

Thank you very much for “cheqmate1”! I’m working Linux Ubuntu 12.04 and I have thought about “5. More Fonts step 4 from 5/16” for two days already. I do all right:
font-family: “Playfair Display”, serif;
but the learning system puts out the error - it waits:
“Playfair Display”, serif
but it receives (without a space char):
“Playfair Display”,serif
I did not know what to do. I have reported to codecademy.com about this bug. No response.
How did you, “cheqmate1”, figure out of this?

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.