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 How to Make a Website Customizing Colors and Fonts Resize Text

Brandon Schabell
Brandon Schabell
3,846 Points
Posted by Brandon Schabell
Brandon Schabell
3,846 Points

The font is not changing.

I've followed the video very carefully, but the font is not changing after I use the google font. I will include my code below:

index.html:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Brandon | Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
      </head>

main.css:

    h1 {
      font-family: 'Changa One', sans-serif;
    }
Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

Did you go to Google fonts website? If so, then google gives you the coding for you to copy and paste.

Your coding looks correct. The only thing I'm wondering about is the font family name. The font family name is showing as Changa+One|Open+Sans in the links href. I haven't worked with a google font with a font family name like that. Usually google font family names is just like this:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

...only naming one font family.

I'm not sure the font family is written correctly.

The google fonts website is: https://www.google.com/fonts

3 Answers

Brandon Schabell
Brandon Schabell
3,846 Points
Brandon Schabell
Brandon Schabell
3,846 Points

I downloaded the workspace files to run them locally- again, they look exactly as they should. There is definitely a problem with the workspace.

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

If it's working on codepen.io and it's a workspace thing then your good to go...as I'm sure you figured out. Workspace has some missing functionality.

Nicholas Mercer
Nicholas Mercer
2,319 Points
Nicholas Mercer
Nicholas Mercer
2,319 Points

Brandon,

I'd check your external CSS file to see if something is overwriting your font choice as your code appears correct. As an example, you can take a look at the following where it's a simplified version of the code working without issue.

CodePen Example: http://codepen.io/anon/pen/rxwppW

Try commenting (<!-- COMMENT -->) out the "main.css" file or double check it's correctly in the "main" folder as linked to within your header.

-Nick

Brandon Schabell
Brandon Schabell
3,846 Points
Brandon Schabell
Brandon Schabell
3,846 Points

My code is displaying perfectly on codepen.io, but the preview from the workspace is not working correctly. I've made sure the files are saved, so I'm not sure what the issue could possibly be.