I keep getting this error You should add serif as a fallback for the Impact font, pls someone should help me

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cafe Menu</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article class="item">
          <p class="flavor">French Vanilla</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
        </article>
        <article class="item">
          <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
        </article>
        <article class="item">
          <p class="flavor">Hazelnut</p><p class="price">4.00</p>
        </article>
        <article class="item">
          <p class="flavor">Mocha</p><p class="price">4.50</p>
        </article>
      </section>
      <section>
        <h2>Desserts</h2>
        <article class="item">
          <p class="dessert">Donut</p><p class="price">1.50</p>
        </article>
        <article class="item">
          <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
        </article>
        <article class="item">
          <p class="dessert">Cheesecake</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
        </article>
      </section>
    </main>
  </div>
</body>
<html>

/* file: styles.css */
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}

h1, h2, p {
text-align: center;
}

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}

h1, h2 fallback{
font-family: Impact;, serif: Impact;
}

.item p {
display: inline-block;
}

.flavor, .dessert {
text-align: left;
width: 75%;
}

.price {
text-align: right;
width: 25%
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15

Challenge: Step 60

Link to the challenge:

1 Like
2

What you’ve done here is added another element to the CSS selector, and since there is no such element as fallback in HTML you have basically broken the selector. So remove fallback from the selector list.

As for adding the fallback font, the instructions say:

“You can add a fallback value for the font-family by adding another font name separated by a comma.”

In this case, you want to add serif as the fallback. So you would add it after Impact and separate them with a comma.

1 Like
3

h1, h2 {
font-family: Impact;, serif: fallback;
}

I still don’t get it sir …Please help me to rearrange the code

4

OK, you did remove fallback from the selector list, so you’re off to a good start. The word “fallback” is just a term we use to describe the concept of adding an additional font in case a previous font isn’t available, but you don’t actually use the word “fallback” in the CSS, so you can remove fallback from the font-family property. Also, a CSS property ends at the first semi-colon, so you don’t want to add a semi-colon after Impact because then everything after the semi-colon will be ignored and you definitely don’t want serif to be ignored. I would read the instructions again:

"You can add a fallback value for the font-family by adding another font name separated by a comma.”

I hope it is clear what you need to put between Impact and serif.

5

awww thank you so much it really helped I got it now …h1, h2 {
font-family: Impact, serif;
}

2 Likes
6

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