Using a google font challenge help

Using a google font challenge help
0

#1

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.


#2

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?


#4

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…


#5

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


#6

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.


#7

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…


#8

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


#9

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


#10

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


#11

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


#12

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?


#13

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