HTML/CSS - Weird Font Tester Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
  <head>
    <title>Funny Font Tester</title>
<link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Bangers|Boogaloo|Aldrich|Brawler|Butterfly+Kids|Snowburst+One|Swanky+and+Moo+Moo|Caesar+Dressing|Ubuntu|Nosifer|Sarina|Shojumaru|Spirax|Rock+Salt|Reenie+Beanie|Atomic+Age|Condiment|Eater|Meddon|Metal+Mania|Monofett|Amatica+SC|Caveat|Coming+Soon">
      
    <style>
  
    </style>
  </head>
  <body>
    <header>
      <h1>Font Font Tester</h1>
      <p>
        I was bored practising and thought this would be a fun way to keep coding interesting and fun for users.
      </p>
    </header>
    <br />
    <nav>
      <ul>
        <li onclick="Boogaloo()">Boogaloo</li>
        <li onclick="Aldrich()">Aldrich</li>
        <li onclick="Butkids()">Butterfly Kids</li>
        <li onclick="Dress()">Caesar Dressing</li>
        <li onclick="Auyt()">Annie Use Your Telescope</li>
        <li onclick="Atomic()">Atomic Age</li>
        <li onclick="Bangers()">Bangers</li>

css

@import url('http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Bangers|Boogaloo|Aldrich|Brawler|Butterfly+Kids|Snowburst+One|Swanky+and+Moo+Moo|Caesar+Dressing|Ubuntu|Nosifer|Sarina|Shojumaru|Spirax|Rock+Salt|Reenie+Beanie|Atomic+Age|Condiment|Eater|Meddon|Metal+Mania|Monofett|Amatica+SC|Caveat|Coming+Soon');
body{
  font-family: Arial;
  background-color: #3151c5; 
}
  h1{
    text-decoration: underline;
  }
  header{
    font-family:arial;
    text-align: center;
    border: 2px solid  black;
  }
  .me {
    text-align: center;
    font-size: 20px;
  }
  ul{
    list-style-type: none;
    background-color:  #444;
    overflow: hidden;
  }
  li{
    display: block;
    float: left;

BROWSER

Console