Using a google font challenge help

I’m on this challenge, and I keep getting “body tag should have family name of Open Sans and generic name of sans-serif.” I have no idea what I’m doing wrong, here is my code:

body { font-family: "Open Sans", sans-serif; } h4 { text-align: center; background-color: rgba(45, 45, 45, 0.1); padding: 10px; font-size: 27px; text-transform: uppercase; } p { text-align: justify; } .links { text-align: left; color: black; opacity: 0.7; } #thumbnail { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .fullCard { width: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px; } .cardContent { padding: 10px; } .cardText { margin-bottom: 30px; }

Alphabet


Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

I don’t see anything wrong with the css - have you copied the link to the font into the header section in codepen’s settings? Would you mind linking us to the project?

Hmm okay, guess I’ll try a different browser. Already tried resetting the code and refreshing the page.

Edit: Well I’m completely baffled now, I tried both firefox and chrome, and even moved to a completely different machine and I’m still getting the same error…

Sorry for asking the obvious, but i was thinking, ¿do you have the css inside the “style” tags?

Can’t paste the code here but is working for me only adding:

body {
    font-family: "Open Sans", sans-serif;
  }

Sorry I couldn’t be more help

This is actually just one of the beginning challenges straight on the FCC site, not using codepen. The link is at the top of the original post.

Yes I do, I’m completely at a loss. It’s not the end of the world, it’s not one of the required challenges for a cert, but I’d like for that little green bubble to be filled in…

Maybe you are in trouble loading the google font behind the scenes.

You can try adding the font manually before the styles opener tag:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

P.D: And checking the console for errors

Tried including the link at the top of the page, and checked console. No errors in the console, and still not working.

So now i’m at a loss too :P.

The last idea i have is delete all content but:

<style>
  body {
    font-family: "Open Sans", sans-serif;
  }
</style>

Since the requisites are only “The body tag should have the family name of “Open Sans” and the generic name of sans-serif”, this 5 lines of code pass the test for me.

If this does not work, i’m out too :frowning:

Regards

Thanks for the suggestion but still nothing works for me. So odd…

OKAY, so I think I have a bigger issue. I decided to just move on and skip to the next exercise (https://beta.freecodecamp.com/en/challenges/applied-visual-design/set-the-fontsize-for-multiple-heading-elements), but I can’t get a single one of the tests to pass (simply setting the different font-sizes for different headings) and I know I’m doing it correctly (I already have some experience with HTML/CSS). Anybody have any idea what in the world could be going on?

Hi,

It is a bug that has already been reported. It does not work on Firefox or Safari. Only Chrome.
I had the same problem.
https://github.com/freeCodeCamp/freeCodeCamp/issues/13314

1 Like