Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Chana Eisenberg
Chana Eisenberg
487 Points

I am trying to customize font size in CSS, but the font code I have copied from google fonts isn't validated on my html?

I have looked it over and compared it to the instructors, it looks exactly the same however it won't validate properly on my index.html. It stays green, if it were to work it should be blue/purple. And when i link the font in css it doesn't either work on my web page

Brenda Krafft
Brenda Krafft
18,036 Points

Can you paste in the relevant code? Sometimes you just need an extra pair of eyes to find a missing comma or something.

Chana Eisenberg
Chana Eisenberg
487 Points

Thanks, here's my code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hannahbelle | Photos</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Josefin+Slab|Abril+Fatface' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body>

8 Answers

Brenda Krafft
Brenda Krafft
18,036 Points

Oh wait, you misspelled class in your html.

These are all errors not pertaining to your font.

Chana Eisenberg
Chana Eisenberg
487 Points

I followed your steps and got it to work by pasting your code (for some reason mine hadn't worked) Still confused why it isn't coming up in the proper colors in my workspace though, but it doesn't matter since it is working anyway. Thank you so much!

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

If you're trying to actually validate the code in a tool like the w3c html validation page you'll need to encode the pipe | character as %7C.

If your code is not working properly, you'll need to post it here so that we can help you figure out what might be going wrong.

Chana Eisenberg
Chana Eisenberg
487 Points

Thanks, I tried subsituting the pipe character for %7C but it didn't help. Here's my code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hannahbelle | Photos</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Josefin+Slab|Abril+Fatface' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body>

Chana Eisenberg
Chana Eisenberg
487 Points

Thanks, I tried subsituting the pipe character for %7C but it didn't help. Here's my code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hannahbelle | Photos</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Josefin+Slab|Abril+Fatface' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body>

rydavim
rydavim
18,814 Points

Hmm, I don't see anything immediately wrong with that part of your code. Could you post a workspace snapshot using the camera icon in the top right of your workspace? That way we can take a look at all of your code and figure out where it's tripping up.

Chana Eisenberg
Chana Eisenberg
487 Points

https://w.trhou.se/qzo0hj9pzj

here is my workspace^. thanks for all your help

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

The code from your workspace snapshot relating to font is all working for me once I set the font. Can you confirm the following works for you? I didn't change anything in your html.

h1 {
  font-family: 'Changa One', cursive;  /* You didn't have anything here after font-family. */
  margin: 15px 0;
  font-size: 1.75em;
}

Edit - If the above doesn't work for you in your preview, please try saving and re-launching your workspace, and then previewing again. If that also doesn't work, clear your browser cache to make sure you're getting an up to date preview.

Chana Eisenberg
Chana Eisenberg
487 Points

thanks!

Chana Eisenberg
Chana Eisenberg
487 Points
Chana Eisenberg
Chana Eisenberg
487 Points

here is my workspace. Thanks for your help.

https://teamtreehouse.com/workspaces/10473862

Brenda Krafft
Brenda Krafft
18,036 Points
Brenda Krafft
Brenda Krafft
18,036 Points

Got it! In main.css you never set the font-family. (Look at h1.)

Chana Eisenberg
Chana Eisenberg
487 Points

thanks for looking it over, I did set the font family (to change one) but since my web link isn't validated it wouldn't work so i erased it. I just tried setting it again, but my code isn't validated so changing the font won't work anyway :/. (if it was validated web link would be purple/blue instead of green) is there anything else you think it might be? I've tried copying and pasting code from google numerous times :/ :/. Thanks for your time!

Brenda Krafft
Brenda Krafft
18,036 Points
Brenda Krafft
Brenda Krafft
18,036 Points

I'm going to try to change the font to something else on my copy and see what happens.

Brenda Krafft
Brenda Krafft
18,036 Points
Brenda Krafft
Brenda Krafft
18,036 Points

I just got this code to work. (I commented out yours so I wouldn't lose it.)

<!--<link href='https://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans' rel='stylesheet' type='text/css'> -->
        <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Then I set it in the css code and change the font size to something really huge:

h1 {
  font-family: 'Indie Flower', cursive;
  margin: 15px 0;
  font-size: 14em;
}

That all seems to work.

Then I went back to the original font that you had typed in, leave my h1 font at 14em. The font size got huge, but the actual font didn't change.

So right now I can change the font and the font-size, but not with the font you originally selected.
Let me look at that particular font.

Brenda Krafft
Brenda Krafft
18,036 Points
Brenda Krafft
Brenda Krafft
18,036 Points

So I tried out your Changa font, and two other Changa font styles.

When I set the body or the head font-family I got two of them to work:

           <link href='https://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans' rel='stylesheet' type='text/css'>
        <!-- ****************Above code DOES change font -->

        <!-- <link href='https://fonts.googleapis.com/css?family=Changa+One:400italic' rel='stylesheet' type='text/css'>
        *********Above code DOES NOT change font -->

        <!--<link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'>  
        ******* Above code changes font -->

But they only work if I set the font family in the css:

font-family:'Changa One', cursive;

So as long as you set the font-family it should work. (I don't know why my second font doesn't work. Chalking that up to wonky font.)

As for the validation, when I run your code through validator.w3.org, the errors I get pertain nothing to the font. I think it's complaining because you are referencing a class "selected" that does not exist in your css file.

Unless I don't understand what you mean by your code isn't validating.