Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Problem with Codecademy - CSS coding

Problem with Codecademy - CSS coding
Thread Tools
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Oct 20, 2016, 02:19 PM

(I hope this belongs here).

I'm a student and ran into trouble with CSS coding in Codecademy. I could only finish 35% of the course. It says there's a mistake in my code, but I can't find any. I followed the instructions pretty precisely. I clicked on "run" very often, so it suggests to finish the code for you - even then, it doesn't work.

It is called "Learn HTML & CSS: Part I", this is the lesson I am taking. There is a chapter on fonts called "Fonts". This is the code in question:

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

Is there a mistake in the font-family? I linked this in index.html:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" type="text/css" rel="stylesheet" >

It says there is something wrong with this step, where you define the font-family in the main header.

Anything wrong?
Think a new age is coming.
Addicted to MacNN
Join Date: Mar 2004
Location: UK
Status: Offline
Reply With Quote
Oct 20, 2016, 03:04 PM
I've seen that link reference elsewhere without the + between Playfair and Display.

<link href="https://fonts.googleapis.com/css?family=Playfair Display" type="text/css" rel="stylesheet" >
I have plenty of more important things to do, if only I could bring myself to do them....
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Oct 20, 2016, 07:32 PM
the link appears to work without the + , but this is how google lists it:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
perhaps the problem is the type.

You could also try importing it directly into your css file and not use the <link>:
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

You appear to have set the font-family the way google has it also:
font-family: 'Playfair Display', serif;

The only difference is you are using " not ' but usually in code as long as you are consistent it works both ways.


Do you have a URL for us to test? Maybe it's a bug in the testing app.
Thread Tools
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Privacy Policy
All times are GMT -4. The time now is 02:02 AM.
All contents of these forums © 1995-2015 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2015, Jelsoft Enterprises Ltd., Content Relevant URLs by vBSEO 3.3.2