Fallback font


#1


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


Did you add the fallback fonts to the main heading?


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

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

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

p {
  font-family: "Helvetica";
  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;
}


#2

I'm having trouble with this same exercise, but I spotted a mistake in code.

The instructions say to add two fallback fonts, not remove the first choice font. Below is the property you want to use:

font-family: Georgia, Garamond, serif;

Another issue you might run into is how you set the font-family property of h2 in two places. Only the last place in the style sheet will matter. The first place is in the selector h1, h2, h3 { .. }, and the second place is in h2 { .. }.


#3

mine lilterally looks like
font-family: Georgia, Garamond, serif;
and it still won't work no matter what I do


#4

I have the same problem. Code looks correct, but it is not accepted by the system.

h1 {
color: #FFF;
font-size: 32px;
font-family: Georgia, Garamond, serif;
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-weight: 100;
font-size: 22px;
font-family: Georgia, Garamond, serif;
line-height: 24px;
padding-bottom: 30px;
text-align: left;
width: 70%;
}

error message says "Did you add fallback fonts to the main heading?" Bug report submitted, just in case.


#5

I have same issue. Code def looks correct but not accepted. Same error message I am getting. I too have submitted bug report. Very frustrating


Stuck at 5/16
#6

Ye same man. Ultra piss take! :confused:


#7

I changed my browser to Google Chrome and it worked for me


#8

yh that works cheers


#9

The same issue, didn't work on Edge and Firefox. Migration to Chrome solved the problem.


#10

I've had the same problem. "Fallback font" does not work on Firefox Linux Ubuntu 12.04. Migration to Chromium Linux Ubuntu 12.04 helped to resolve this unpleasantness.


#11

guys give all the style.css code cuz it doesn't work for me and i am working on google chrome :angry:


#12

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

this one worked for my .


#13

So I have to switch browsers? Arg a bit annyong, but I will try it. Chrome conspiricy I say! >.>


#14

Same issue, my configuration:
Firefox 49.0 on Ubuntu 16.04 LTS (Mint)

I switched to Chromium 53.0 and it is working fine.


#15

now Im having the same problem with the second Instruction


#16

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