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

Thomas Williams
seal-mask
.a{fill-rule:evenodd;}techdegree
Thomas Williams
Front End Web Development Techdegree Student 1,856 Points
Posted by Thomas Williams
.a{fill-rule:evenodd;}techdegree
Thomas Williams
Front End Web Development Techdegree Student 1,856 Points

I'm having issues importing google fonts into my HTML and CSS files...

Here is a copy of my HTML and CSS. For some reason, when i put this code in, it does not change the font on my page. What am I doing wrong?

HTML:

<head>
      <link rel="stylesheet" type="css" href="css/stylesheet.css">
      <meta name=viewport content="width=device-width, initial-scale=1">
      <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
      <title>
        Thomas Williams
      </title>
      <h1>Thomas Williams</h1>
        <ul>
          <li>Home</li>
          <li>Portfolio</li>
          <li>contact</li>
        </ul>
        <img src="images/responsive-layout-profile.png" alt="profile picture">
      <p>Hi! Im a front-end developer who loves responsive design and css. I recently finished learning front-end web development at Treehouse and am excited to put all my skills to use!</p>
    </head>

CSS:

body {
  font-family: 'Source Sans Pro', sans-serif;
}

2 Answers

Martin Zarate
Martin Zarate
10,723 Points
Martin Zarate
Martin Zarate
10,723 Points

A few issues I can see: first you have some HTML code in the head section of the page. Second, and the reason why the font isn't working is that your stylesheet is listed first on the page, in your CSS you are telling the browser to use the Google font, but the browser can't find it because it hasn't loaded it yet, simply place your CSS after the Google one:

<head> 
    <meta name=viewport content="width=device-width, initial-scale=1"> 
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> 

    <link rel="stylesheet" type="css" href="css/stylesheet.css">

    <title> Thomas Williams </title> 

</head>

<body>
    <h1>Thomas Williams</h1> 
    <ul> <li>Home</li> <li>Portfolio</li> <li>contact</li> </ul> 
    <img src="images/responsive-layout-profile.png" alt="profile picture"> 
    <p>Hi! Im a front-end developer who loves responsive design and css. I recently finished learning front-end web development at Treehouse and am excited to put all my skills to use!</p>
Thomas Williams
seal-mask
.a{fill-rule:evenodd;}techdegree
Thomas Williams
Front End Web Development Techdegree Student 1,856 Points
Thomas Williams
.a{fill-rule:evenodd;}techdegree
Thomas Williams
Front End Web Development Techdegree Student 1,856 Points

That makes sense but, I think i am still doing something wrong. It's still not working right This is what i have:

<!doctype html>
<html>
  <header>
    <head>
      <meta name=viewport content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">

    <link rel="stylesheet" type="css" href="css/stylesheet.css">

    <title> Thomas Williams </title>
    </head>
      <body>

        <title>
          Thomas Williams
        </title>
        <h1>Thomas Williams</h1>
          <ul>
            <li>Home</li>
            <li>Portfolio</li>
            <li>contact</li>
          </ul>
          <img src="images/responsive-layout-profile.png" alt="profile picture">
        <p>Hi! Im a front-end developer who loves responsive design and css. I recently finished learning front-end web development at Treehouse and am excited to put all my skills to use!</p>


        <h2>PORTFOLIO</h2>
          <img src="images/portfolio-1.png" alt="Marketing Image">
            <h3>Marketing page</h3>
              <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
          <img src="images/portfolio-2.png" alt="Search Image">
            <h3>Search page</h3>
              <p>This project searches through a specific database to find information that the user is thrying to look up.</p>
          <img src="images/portfolio-3.png" alt="Travel app image">
            <h3>Travel app</h3>
              <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
          <img src="images/portfolio-4.png" alt="Map of favorite spot image">
            <h3>Map of favorite spots</h3>
              <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
          <img src="images/portfolio-5.png" alt="photo gallery image">
            <h3>Photo Gallery</h3>
              <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
          <img src="images/portfolio-6.png" alt="calculator image">
            <h3>Calculator</h3>
              <p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
        <h3>CONTACT</h3>
          <p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
        <ul>
          <li>Phone <strong>+1(111)555-1234</strong></li>
          <li>Email <strong>email@yoursite.com</strong>
        </ul>
      </body>
    </header>
  <footer>
    <h3>Thomas Williams</h3>
    <h3>BACK TO TOP</h3>
  </footer>
</html>

body {
  font-family: 'Indie Flower', cursive;
}
Martin Zarate
Martin Zarate
10,723 Points
Martin Zarate
Martin Zarate
10,723 Points

Can we see the whole CSS file? I assume you have other styles overriding the 'body' font, ex: 'div' or 'p' tags.