Basic css, import a google font

HTML-CSS
1

Tell us what’s happening:
The check says my code is wrong, but it isnt. The app looks exactly as is should, with the lobster font affecting CatPhotApp, only.
For my own edification, can someone tell me why the checker wont let me advance?
I’m missing something completely obvious? =;-G

Your code so far

    <link href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> 
<style>
   h2 {
     font-family: 'Lobster Two', cursive;
  }

  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Import a Google Font

Link to the challenge:

2

You are supposed to be importing and using Lobster, not Lobster Two.

3

your code snippet doesn’t match

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

Thank you iealeen,
I edited the post once, when I posted it and saw the text issues, but obviously not correctly. I will remember how to format the next time. As for the code snippet, still no-go. It still will not advance me. So I am just going to move on and leave that challenge unchecked. Thank you again for taking time to reply!

5

Thank you eoja, I tried it both ways. The code that was in there when I wrote my post–I was using what Google Fonts says to use for css sheets if you are embedding that Lobster font. But, I went so far as to copy the text from the “answer” video, exactly as it is, and I still cannot get the software to progress. So Im just going to skip that challenge.
Im taking a Udemy course at the same time, and it is confusing because each ‘teacher’ has a different way of doing code, so I experiment a little. Thank you for taking time to respond!

6

you really just need to add the link at the top, and do this:

Create a font-family CSS rule that uses the Lobster font, and ensure that it will be applied to your h2 element.

if it doesn’t pass, reset your code, you may have changed some other code

1 Like
7

Thank you again, iealeen! Im not sure what happened, but resetting the lesson and taking it over, fixed whatever it was. I feel like a dope, I spent 1.5 hours on that last night. Wow. Thank you again, I appreciate your help! :slightly_smiling_face:

1 Like