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 naim nass
naim nass
Courses Plus Student 1,079 Points

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
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.

naim nass
PLUS
naim nass
Courses Plus Student 1,079 Points
naim nass
naim nass
Courses Plus Student 1,079 Points

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
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.

naim nass
PLUS
naim nass
Courses Plus Student 1,079 Points
naim nass
naim nass
Courses Plus Student 1,079 Points

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
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.

naim nass
PLUS
naim nass
Courses Plus Student 1,079 Points
naim nass
naim nass
Courses Plus Student 1,079 Points

http://w.trhou.se/7814cehcte

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points
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?

naim nass
PLUS
naim nass
Courses Plus Student 1,079 Points
naim nass
naim nass
Courses Plus Student 1,079 Points

thx for you reply i will try now

so the code is right