title: Want to change fonts back and forth using javascript button
body: <p>I want to be able to change the font on a web page from its default CSS styled "Amatic SC" to Times New Roman for easier reading. I have a button that sucessfully changes it to Times New Roman, but can not change it back. My javascript is as follows</p>
  
  <pre><code>function changeFont(){
  var fon = document.getElementById("posts");
      if (fon.style.fontFamily == "Amatic SC") {
          fon.style.font = "150% Times New Roman";
      }
      else {
          fon.style.font = "200% Amatic SC";
      }
  }
  </code></pre>
  
  <p>HTML looks like this:</p>
  
  <pre><code>&lt;div id="posts"&gt;Content&lt;/div&gt;
  &lt;button type="button" onclick="changeFont()"&gt;Change the font!&lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#posts {
    background-color: #F0F0F1;
    margin: 64px 64px 64px 64px;
    padding: 10px;
    font-family: 'Amatic SC', cursive;
    font-size: 200%;
    border: 5px solid red;
    overflow: auto;
    box-shadow: 0 0 10px #777777;
  }
  </code></pre>