Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

hello everybody can someone tell me why my font is not applying thank you

HTML code:

<!DOCTYPE html> 
<html lang='en'>
<head>
  <meta charset="utf-8">
  <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
  <link href="nano.css" rel="stylesheet">


</head>
<body>       <h1> First Code Application</h1> 
   </body>
</html>

CSS code:

html {
       border-top: 32px solid blue;
} 


h1 {
      text-align: center;
      color: blue;
      font-size: 10em;
      line-height: 2em;
      font-family: 'Indie Flower', cursive;
      font-weight: 400;
   }

5 Answers

Samuel Glister
Samuel Glister
12,471 Points

Hi Naim,

Your code should look something like this..

This being your HTML and assuming you have your css file located in a CSS folder:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
     <h1> First Code Application</h1>
</body>
</html>

With your css looking something like this

html {
   border-top: 32px solid blue; 
   }

h1 {
       text-align:center; 
       color:blue; 
       font-size :10em; 
       line-height:2em; 
       font-family: 'Indie Flower', cursive; 
       font-weight:400; 
}

I would also make sure the font family is imported if it is external so for example if it comes from google fonts the below html would need to be imported into your head tag

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

hope this helps.

thank you for your reply its exactly what i coded but the font is not working

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Naim,

Assuming this code is coming from Treehouse workspaces, could you provide a snapshot of your code? You can find the snapshot button at the upper right corner of your workspace.

of course but i can find the way to add the snapchat to the forum so i copied the code in my first question

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Naim, once you press the snapshot, it will generate a link, paste that link here as a comment.

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Naim,

There's no need to share it twice, a snapshot gives the whole workspace, not just a page. I fixed it for you. :)

I forked your workspace and tried to preview it on my own, I can see the font just fine.

Have you tried using a different browser?

thx for you reply i will try now

so the code is right