Tribute Page - google fonts and html problem

HTML-CSS
1

I’m trying to complete the tribute page project. I’m trying to get most of my HTML completed before I start styling it, but I’ve done a couple of css entries. Here are my two problems on codepen:

  1. I went to change the alt info for my img tag and suddenly my whole page disappeared from the preview window. I’ve looked and looked, but I can’t figure out what’s wrong. I realized I had my img tag closing and so I fixed that, but the whole page is gone.

  2. I cannot figure out how to import google fonts. I’ve researched and found so many different answers, but none of them work. One person was saying to add it into the “Add External Stylesheets/Pens” section of the Pen settings. Another was saying that you add it into the css box. Nothing I’ve done has worked. I’m now trying something new, but I cannot even see if it’s working because of the first problem above.

Any help would be appreciated. Here is a link to my codepen: https://codepen.io/milmeslash/pen/JjGGLjo

2

Hello,

  1. what do you mean with ‘the whole page is gone’? If I look at your work on codepen I can see your html and a bit of css.
  2. If you want to import google fonts you have 2 choices :
  • inserting <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet"> in the head of your html.
  • or by @import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap'); and you have to put it in the style portion of your document.
    In either cases you have to declare your selector where you want to use that font. I.e. h1{ font-family: 'Balsamiq Sans', cursive; }
    I hope it was clear!
1 Like
3

Hello,

Thanks for your response! It seems to have been fixed. Maybe it wasn’t working correctly due to my browser being out of date.

Thank you for the CSS help :slight_smile:

1 Like