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.

General Discussion

Michael Mountain
Michael Mountain
3,022 Points

Font stopped working :(

Hi all,

I am working on a website and i made a disclaimer page and suddenly the characters ü ä ö have stopped working... this has confused me to no end if i write them as html entities they work but what i want to know is why does it work on my index.html and suddenly not on another page with the same html and same css..

Ron McCranie
Ron McCranie
7,836 Points

Can you post a link? This shouldn't be happening as you explained it so there is probably something else going on.

7 Answers

Michael Mountain
Michael Mountain
3,022 Points

my code isn't posting here properly.. why is that

Stone Preston
Stone Preston
42,016 Points

see below to see how to post code in the forum. you have to format it

code

Michael Mountain
Michael Mountain
3,022 Points
<!DOCTYPE html> 
<html> 
  <head>
    <meta charset="utf-8">
    <title> Michael Mountain Photography | Photographer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header> 
      <a href="index.html" id="logo">
        <h1> Michael Mountain </h1>
        <h2> Fotograf </h2>
      </a>
      <nav> 
        <ul>
          <li> <a href="index.html" class="selected">  Portfolio </a></li>
          <li> <a href="about.html"> Über mich </a> </li>
          <li> <a href="contact.html">  Kontakt </a> </li>
          <li> <a href="impressum.html">  Impressum </a></li>
        </ul>
      </nav>
    </header>
    <div class="scale" id="wrapper">
      <p>
        <strong> Portfolio</strong>
      </p>
      <section>
        <ul id="gallery"> 

          <li> 
            <a href="ge.html"> 
              <img src="Images-GE/DSC_7434.jpg" alt="">
              <p> Hochzeiten </p>
            </a>  
          </li>
          <li> 
            <a href="daverach.html"> 
              <img src="Images/DSC_0065-2.jpg" alt="">
              <p> Pärchen Bilder </p>
            </a>  
          </li>
          <li> 
            <a href="christianpatrizia.html"> 
              <img src="Images-pc/DSC_0153-3.jpg" alt="">
              <p> Verlobung </p>
            </a>  
          </li>

          <li> 
            <a href="NW.html"> 
              <img src="Images-N/NW-15.jpg" alt="">
              <p> Kinder </p>
            </a>  
          </li>
          <li> 
            <a href="Jessie.html"> 
              <img src="Images-J/JH-17.jpg" alt="">
              <p> Portrait </p>
            </a>  
          </li>
          <li> 
            <a href="ge.html"> 
              <img src="Images-GE/DSC_7434.jpg" alt="">
              <p> Events </p>
            </a>  
          </li>


       </ul>
      </section>

      <footer>
        <a href="http://facebook.com/mike.mountain2">
          <img src="Images/facebook-wrap.png" alt="facebook logo" class="social-icon"> 
        </a>
        <P> &copy; 2014 Michael Mountain. </P>
      </footer>
      </div>
   </body>

</html>  
Michael Mountain
Michael Mountain
3,022 Points
/************************
GENERAL
*************************/
body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
    max-width: 2000px;
    margin: auto 0px;
    padding: 0 0%;
    background-color:inherit ;
    clear:both;


}

a {
  text-decoration: none;
}

img {
  max-width: 100%


}

h3 {
  margin: 0 0 1em;
}

p {
  text-align:center;
  margin:o, 5%, 0, 5%;
}




/************************
Heading
*************************/

header{
  float:left;
  margin: 0 0 30px 0;
  padding: 2pc 0 0 0;
  width:100%;
  height:200px;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'allura', cursive;
  margin: 20px 0;
  font-size: 3em;
  font-weight: normal;
  line-height :0.8em;

}

h2{
  font-family:'allura', cursive;
  font-size: 2em;
  margin: -10px 0 0;
  font-weight: normal;
}

/************************
navigation
*************************/
nav {
  font-family:allura;
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style:none;
  margin:0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight:800;
  padding: 15px 10px;
}


/************************
footer
*************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear:both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px; 
  height: 20px;
  margin:0 5px;
}

/************************
PAGE: portfolio
*************************/
#gallery {
  margin:0;
  padding:0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;  
  background-color:#f5f5f5;
  color: #bdc3c7;
  border-radius:4%;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color:#bdc3c7;
}

img{
  border-radius:4%;
  clear:top;    
}
/************************
About
*************************/

.profile-photo {
  display:block; 
  max-width: 500px;
  margin: 0 auto 30px;
  border-radius:100%;
}

h3 {
  text-align:center;

}

/************************
Contact
*************************/

.contact-info {
  list-style: none;
  padding:0;
  margin:0;
  font-size:0.9em;
  }

.contact-info a {

  display:inline-block;
  min-height: 20px;
  background-repeat:no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px 10px;;
}
.contact-info li.maps a {
  background-image: url('../Images/maps.png');
  }

.contact-info li.phone a {
  background-image: url('../Images/phone.png');
  }
.contact-info li.mail a {
  background-image: url('../Images/mail.png');
  }
.contact-info li.facebook a {
  background-image: url('../Images/facebook.png');
  }



/************************
Colors
*************************/



/*site body*/



/*green header */
header {

  border-radius: .5%;
  background: -webkit-linear-gradient(#0099ff,#99ccff);
    background: -moz-linear-gradient(#0099ff,#99ccff);
    background: -o-linear-gradient(#0099ff,#99ccff);
    background: -ms-linear-gradient(#0099ff,#99ccff);

  background: -webkit-radial-gradient(2% 2%, circle, #FFFFC2, 0066FF);
    background: -moz-radial-gradient(2% 2%, circle, #FFFFC2, 0066FF);
    background: -o-radial-gradient(2% 2%, circle, #FFFFC2, 0066FF);
    background: -ms-radial-gradient(2% 2%, circle, #FFFFC2, 0066FF);
}

}
/*nav background on mobile */
nav  {
  background: #99ccff;
  border-color:#33ffff;
}

/*logo text */
h1,h2 {
  color: #fff
}

/* Links */
a {
color:#6ab47b;
}


/*nav link color */
nav a, nav a:visited {
  color: #fff;
}

/*selective nav link */

nav a.selected, nav a:hover {
  color:black;
}



/************************
Dave and Rachel
*************************/

#back2 {
  margin: -10px 0 10px 10px;
  background-color:#0099ff;
  border-radius:50%;
  width: 20%;
  color:#fff
}

#back2 h3 a {
  color:#fff;
}

/****************transformations**************/
li{
  transition: 1s ease-in-out;

}
li:hover {

  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -o-transform:scale(1.2);
  transform:scale(1.2);

}
Ron McCranie
Ron McCranie
7,836 Points

I'm taking a look at it now

Ron McCranie
Ron McCranie
7,836 Points

You posted your index.html file and main.css but the page that's having the problem is another page? If so could you post the code to that page too?

Michael Mountain
Michael Mountain
3,022 Points

ok thank you :)

yes your right its another page but if i paste exactly the same code it won't display the umlauts. i just realised that every new page i have made since i switched to komodo edit does this.. could it be saving it in a weird way?

Michael Mountain
Michael Mountain
3,022 Points

Ok i just figured it out that it was saving it in another unicode setting... Thank you so much for you time though! i appreciate it :)

Ron McCranie
Ron McCranie
7,836 Points

I was thinking that would be the issue since you mentioned you're copying and pasting the code.