4. Fall Back Fonts (Bug? Wrong code?) HELP


#1


Link to exercise:
https://www.codecademy.com/courses/learn-html-css/lessons/css-fonts/exercises/fallback-fonts?action=lesson_resume


No matter what I type or how I type the "fall-back" CSS code, it states that my code is incorrect.

  1. In style.css, set the first fallback font of the main heading and subheading to Garamond, and set the final fallback font to serif.

  2. Next, set the first fallback font of the paragraph to Arial, and set the final fallback font to sans-serif.

ERROR: Did you add the fallback fonts to the main heading?


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

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

p {
  color: AliceBlue;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1em;
  text-align: left;
  width: 100%;
}



#2

try like that :

h1, h2, h3 {
font-family: Georgia, 'Garamond', serif;
}


#3

I have the same error and i don't know why ! @jeremybits your answer works ! :slight_smile: I put this :

h1, h2, h3 {
font-family: Georgia, 'Garamond', serif;
}

and this

h2 {
font-family: Georgia, 'Garamond', serif;
}


#4

Hello,

I am having the same problems and nothing seems to work. Below is what I have tried:

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

h2 {
font-family: Georgia, 'Garamond', 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%;
}

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

h2 {
font-family: Georgia, Garamond, 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%;
}

Also tried the below with same error:

h1, h2, h3 {
font-family: Georgia, 'Garamond', serif;
}

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

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


#5

The course is still a bit buggy (I still can't resume the course, instead I have to manually select the exercise and cycle through), but it seems to be working now: (please note that I changed my browser from Firefox to Chrome)

https://www.youtube.com/watch?v=7Nb2RAeN-GY


#6

I had this problem then copied the paragraph section as it is in the end of this video and it worked.


#7

If anyone else has some issues with their correct code not working, trying switching browsers!

It seems like most of the problems I'm having are coming from Mozilla Firefox 49.0.1. I've switched to Chrome Version 53.0.2785.143 m (64-bit), kept the code as-is, and hit "run," and it passed.


#8

thx. helped another browser


#9

Hello,

you can have the same problem with the second instruction.

I try with firefox, chrome and it doesn't work but it's good with opera


#10

mine doesn't work that way.

I absolutely follow that video with my chrome browser, it didn't work...

===================================================

updated:

I just restarted my win 10 system as windows update required and now the problem fixed. I highly doubt it could be the windows update caused this problem. So if you have same issue, install windows update and restart PC, your problem could be possibly resolved as mine.


#11

Here's the correct "styles.css" code if anyone else has any trouble (if it doesn't pass, then there's either a bug with the system and/or it doesn't like your browser):

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 {
  color: #FFF;
  font-family: Georgia, Garamond, serif;
  font-size: 32px;
  padding-top: 100px;
  text-align: left;
  width: 60%;
}

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

p {
  color: AliceBlue;
  font-family: Helvetica, Arial, sans-serif;
  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%;
}

#12

I have the same problem too. I copied the code but it does not work


#13

following the advice of another and tried with chrome it worked. browser issue


#14

Confirmed I'm getting this issue on Mozilla Firefox 49.01

The irony of a course about web development that has a tangential focus
on writing backup fonts for the benefit of non-compatible browsers, not
working due to a bug with a specific browser version, is not lost on me


#15