Import a Google Font-Help

HTML-CSS
1

Hi,
It was mentioned in the lesson for this challenge to use quotes for font-families which space in their names.

But when I do not use the quotes for Open Sans along with Lobster font, it is still working.

h2{
font-family: Lobster, Open Sans;
}

Is it not required to use quotes for font-families?

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  .red-text {
    color: red;
  }
  h2{
    font-family: Lobster;
  }
  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/import-a-google-font

2

Hey @shamil12, there’s nothing wrong with your code. It’s working fine in my laptop. You close your browser window, reopen and try the same code. If this doesn’t work try a different browser except IE. You are not the only one who is facing this problem, but unfortunately there is no proper solution. It happens randomly with different challenges. Hope this helps. thanks.

3

I had a similar problem and it was because I was using the GENERIC placeholder with my font-family.
eg, font-family: “Lobster”, monospace;

Hope this helps.