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 Matthew Smith
Matthew Smith
Courses Plus Student 547 Points

Wrong font displayed

When I load the file in the browser it shows the text as a funky symbol font.

Please help +WTH am I doing wrong,

<!DOCTYPE html>
<html>
<head>
<title>Smells Like Bakin'</title>
<Style>
  body {
     background-color: #420600
   }
    h1 {
      color: #FAF3BC;
    }
    p {
       color: #FAF3BC; 
    }
</style>
<head>

<body>
    <h1>Smells LIke bakin</h1>
</html>

5 Answers

Matthew Smith
Matthew Smith
Courses Plus Student 547 Points

Thanks,

It must be the G browser, it is displaying properly in Mozilla FF.

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

I'm not sure exactly what the source of the problem is... My initial thought is that you are using a text editor that's adding a bunch of header stuff to your HTML text file (like Microsoft Word or TextEdit with RTF markup turned on). But without seeing your page's source, it's hard to say. Are you able to post the code of your index.html file somehow (either as a reply to this post formatted with grave marks -- the character right above the TAB key, or as a JSFiddle)? That might help us track down any possible issues in your HTML syntax or document format...

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

I copied and pasted all of the code you formatted on the first post into SublimeText 2 and was able to get the page to display properly. As Matthew Campbell points out, there are a few minor semantic issues to nit pick, but in general HTML5 is pretty forgiving.

With that said, I'm not sure your issue is with your HTML. Are you sure that you're saving your file with the .html file extension? If you're not, then it's likely that your browser will display your markup instead of your styled webpage...

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

What is the code you're typing. Go to codepen.io and copy and paste in your HTML and CSS. Then link it here.

Much easier for you to write and for us to read.

Matthew Smith
Matthew Smith
Courses Plus Student 547 Points

www.codepin.io/anon/full/BryLw

When I cut the sections of code into Google search the text comes up in a font that is readable.

I am using Sublimetext2 which I had to pay for but am now regretting, Think it was a noob mistake?

J.T. Gralka
J.T. Gralka
20,126 Points

Can you give us an example of the "unreadable" code you're getting when you're viewing the file on your local computer? As you said, it looks like your codepen example is working fine...

Matthew Smith
Matthew Smith
Courses Plus Student 547 Points

No, can't cut and past the image, snippet, link from drop box or G Drive. I tried to search for the name of the font but it only return the proper text. I think it is a browser issue as it displayed well in Firefox. Just frustrating that I can't share what it looks like nor can I find the write answer. Good thing I can get my money back. Will try another ed service.

Thanks, I will try all the suggestions.

Thanks guys,

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

You need a / before the second <head>. Like this. </head> and put this before the closing HTML tag </body>.

I don't know if that's the problem or not but needs doing anyway.