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

CSS How to Make a Website Customizing Colors and Fonts Pick Fonts and Set Relative Units

I followed all the steps, and when I refreshed my browser to preview my website, the font did not change. What is wrong?

I did the 'Changa One' font. I copied and pasted the code in index.html and main.css. I jmade sure the location in the lines of code are correct. I made sure I saved. I refreshed the browser. Ugh.

Keith Greatz
Keith Greatz
4,377 Points

Check out the vid to the side of the forums called "Tips for asking questions", it shows you how to copy and paste code, Im pretty new but i like to help if i can, just need more specific information.

I found the video about posting questions a little confusing so heads up the ``` is the key to the left of you #1 key. Come back with some more info and I'll try help

Keiffy101

8 Answers

Keith Greatz
Keith Greatz
4,377 Points

Hi Deanna, hope you found the issue for this already, as Jeff said it might have been an issue with the google link, I copied you HTML and CSS and changed the google fonts link to

<link href='http://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'>

And it worked, It shows the heading under the different font in my preview

Either way it appears the issue is definitely with the google font link, hope this helps.

Keiffy101

Glad you figured it out!

I still couldn't get that font to work, so I just selected a different font and all is well. Thanks!

Could you paste the code here so we can see it? Also make sure you saved the css/html files to ensure it updated. That is very important. It will not update if the css/html are not saved.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Themes Come True | Children's Party Planner</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/cssfamily=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Themes Come True</h1>
        <h2>children's party planning</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Gallery</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id = "id wrapper">
      <section>
        <ul>
          <li>
            <a href="img/gallery1.jpg">
              <img src="img/gallery1.jpg" alt="">
              <p>April Showers and Rainbows Party</p>
            </a>
          </li>
          <li>
            <a href="img/gallery2.jpg">
              <img src="img/gallery2.jpg" alt="">
              <p>Oscar Inspired "Olivia" Party</p>
            </a>
          </li>
          <li>
            <a href="img/gallery3.jpg">
              <img src="img/gallery3.jpg" alt="">
              <p>Annie 2014 Movie Party</p>
            </a>
          </li>        
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/eventthemes"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
        <a href="https://www.facebook.com/themescometrue"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
        <p>&copy; 2014 Themes Come True</p>
      </footer>
    </div> 
  </body>
</html>

Specifically:

<link href='http://fonts.googleapis.com/cssfamily=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
GENERAL
*********************/

#wrapper {
  max-width: 940px;
  margin: 0 auto; 
  padding: 0 5%;
}

a {
  text-decoration: none;
}



/*********************
HEADING
*********************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em; 
}

<link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

And I know I saved it. I double checked that step for sure.

Hmm, Idk it should be working. Im just learning so maybe a more experiecned person can answer. Feel free to email me the project files in your workspace (.zip) and I will mess around with it and see if I can get it to work.

It appears your HTML code is correct... I will have to figure it out. Maybe try to get the google API link again, and just repeat the process. Perhaps it was a bad "link" generated by google. Im just spitballing here.

I just changed to a different font and all is well. Thank you!

Jesse Jut
Jesse Jut
737 Points

I am having the exact same problem. My code is the exact same as yours but even when I try a different font its still not working

lets see your code

Jesse Jut
Jesse Jut
737 Points

for some reason it just started working. I didn't change anything and I definitely had saved it before hand so I don't know why it wasn't working before.

Perhaps it was the script from google? Or the CSS font-famil with proper ''

Elena Paraschiv
Elena Paraschiv
9,938 Points

I have the same problem

/*****************************************************************************
  COLORS
******************************************************************************/


header{
background: #3b5998;
border-color:#f1be28;
border-width:10px;
border-style: solid;
}


nav {
    background:#4e69a2;
}

nav a{
    color:#fff;
    text-decoration:none;
}
a{
    color:#3b5998;
    text-decoration:none;
}
li {
    list-style:none;
}

nav a:visited{
color: #655643;
}

nav a:hover{
    color:#ffc0c2;
}

/*****************************************************************************
ALIGN
******************************************************************************/
#logo {
    text-align:center;
    margin:0;

}

    h1 {
        font-family: 'Lobster', cursive;
    }

#wrapper{
    max-width:940px;
    padding: 5% 5%;
    margin:0 auto;
}
Elena Paraschiv
Elena Paraschiv
9,938 Points
<!DOCTYPE html>
    <html>
    <head> 
            <meta charset="utf-8">
            <title>Elena Paraschiv | Designer</title>
            <!-- link tag links to another file, the normalize.css / rel is the relationship and is a style sheet-->
            <link rel="stylesheet" href ="css/normalize.css">
            <link href='https://fonts.googleapis.com/css?family=Lobster|Caudex:700,700italic' rel='stylesheet' type='text/css'>
            <link rel="stylesheet" href ="css/main.css">


        </head>



        <body>

            <header>
                <a href="index.html" id="logo">
                    <h1>Elena Paraschiv</h1>
                    <h2>Designer</h2>
                </a>
                <nav>
                    <ul>
                    <li><a href="index.html" class="selected">Portfolio</a></li>    
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>   
                </nav>
            </header>

            <div id="wrapper">
                <section>
                    <p>
                        <ul>
                            <li>
                                <a href = "img/numbers-01.jpg">
                                    <img src="img/numbers-01.jpg" alt="picture 1">
                                    <p>Acadea programata in html</p>
                            </a>
                            </li>

                                <a href = "img/numbers-02.jpg">
                                    <img src="img/numbers-02.jpg" alt="picture 1">
                                    <p>Albastrel si galmben n html</p>
                            </a>
                            </li>
                            <li>
                                <a href = "img/numbers-06.jpg">
                                    <img src="img/numbers-06.jpg" alt="picture 1">
                                    <p>6-le din Univers programat in CSS</p>
                            </a>
                            </li>
                            <li>
                                <a href = "img/numbers-09.jpg">
                                    <img src="img/numbers-09.jpg" alt="picture 1">
                                    <p>Al 9-lea roz in Mysql</p>
                            </a>
                            </li>
                            <li>
                                <a href = "img/numbers-12.jpg">
                                    <img src="img/numbers-12.jpg" alt="picture 1">
                                    <p>12 dungulita PHP/p>
                            </a>
                            </li>
                        </ul>
                    </p>
                </section> 

                <footer>
                    <a href = "https://twitter.com/?lang=en">
                        <img src="img/twitter-wrap.png" alt ="Twitter Logo">
                    </a>
                    <a href = "https://www.facebook.com/">
                        <img src="img/facebook-wrap.png" alt ="Facebook Logo">
                    </a>
                    <p>
                        &#169;2015 Elena Paraschiv
                    </p>
                </footer>
            </div>
        </body>


    </html>
<link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>