Font stopped working :(

Question

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

Answer 1 · 2014-07-15T14:58:36Z

July 15, 2014 2:58pm

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

Answer 2 · 2014-07-15T15:00:56Z

July 15, 2014 3:00pm

oh cheers :)

Answer 3 · 2014-07-15T15:07:20Z

July 15, 2014 3:07pm

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

Answer 4 · 2014-07-15T15:08:07Z

July 15, 2014 3:08pm

/************************
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);

}

Answer 5 · 2014-07-15T20:12:02Z

July 15, 2014 8:12pm

anyone?

Answer 6 · 2014-07-15T20:52:36Z

July 15, 2014 8:52pm

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?

Answer 7 · 2014-07-15T20:57:38Z

July 15, 2014 8:57pm

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 :)

Welcome to the Treehouse Community

Looking to learn something new?

Michael Mountain

Michael Mountain

Font stopped working :(

Ron McCranie

Ron McCranie

7 Answers

Michael Mountain

Michael Mountain

Stone Preston

Stone Preston

Michael Mountain

Michael Mountain

Michael Mountain

Michael Mountain

Michael Mountain

Michael Mountain

Michael Mountain

Michael Mountain

Ron McCranie

Ron McCranie

Ron McCranie

Ron McCranie

Michael Mountain

Michael Mountain

Michael Mountain

Michael Mountain

Ron McCranie

Ron McCranie