Imported google webfonts not working on the test suite

Curriculum Help Certification Projects
#1

I’m having some problems in the test suite.
I imported som google fonts (and adobe) wich are locally working on my code, but somehow when i put the code on the test suite it doesn’t load the fonts.
Searched on the internet and on the forum without luck.
Note 1: I already had the same problem with te tribute page.
Note 2: Ignore the lack of images. I’didnt yet uploaded them.
Note 3: Now the suit presents some color changes on the navigation bar (not happening while working on local)

In advance, TY!
Your code so far
https://codepen.io/LucioDiRuggiero/pen/VwvqdVz

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

#2

I can see one google font added, it’s Darker Grotesque
and it is correctly applied to p tags with class .sans
theres also body{font-family: "cooper-black-std",serif;} rule in css, and no such font added.
not sure about color… do you mean dark grey over blue? it comes from bootstrap class .bg-dark of nav tag

1 Like
#3

The cooper Black font is imported from typekit.
i tried with to add the fonts via under the settings, putting the links on the head stuff but nothing is happening… :confused:
The codepen is updated

#4

Not sure why it’s not working the way it is , but theres another option add class=“tk-cooper-black-std” to body , is that what you wanted?

upd: or just use google font

#5

You have an exclamation point after !important on the body font-family declaration, which is making it fail to overwrite the Bootstrap fonts.

You have:
font-family: "cooper-black-std",serif !important!;

Should be:
font-family: "cooper-black-std",serif !important;

BTW, you really shouldn’t put the same stuff both in the HTML and the Codepen settings, you might run into issues. In the pen settings, add CSS files to the CSS section, add JavaScript files to the JS section and then add the rest to the HTML section in the "Stuff for <head>" box.

1 Like
#6

Ok… i really can’t belive it.
TY very much, that tiny thing was screwing the whole thing.
Yeah… i was thinking the same about the duplicates css js and head stuff.
It’s nice to see my first post with a few responses and (super) the solution to my problem.
Problaby i will make the finish update tomorrow. Just in cse, you wanna see the end result.